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近年 来 ， 信 息 按 术 发 展 和 应 用 奕 飞 爱 进 ， 互 联网 已 经 成 为 第 四 柑 体 ， 使 全 球 信 
息 共 享 成 为 现实 ， 越 来 城 多 的 公司 、 机 构 乃 至 个 人 都 拖 有 了 自己 的 网 页 或 网 站 ， 
网 站 经 济 逐 步 成 为 当今 最 热门 的 话题 之 一 。 一 个 废 功 的 网 站 可 以 很 清楚 地 将 网 站 
的 内 容 和 特色 传递 给 浏览 者 ， 因 此 ， 如 何 设 计 出 与 众 不 同 、 独 树 一 想 的 网 站 就 成 
了 设计 者 的 重要 评 程 。 

本 章 首 先 介绍 一 些 网 络 和 网 页 制作 的 基本 知识 ， 人 然后 阐 要 介绍 Adobe 公 司 推出 
的 梦 包 殷 合 -一 Dreamwemver CS6、Flash CS6 和 Fireworks CS6。 它 们 汤 盖 了 网 页 制作 
与 站 点 管理 (Dreamweaver) 、 网 页 动画 制作 (Flash) 及 网 页 图 像 处 理 

(Feworks) ， 是 使 用 最 多 的 网 页 制作 工具 之 一 。 
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本 书 以 理论 与 实践 相 结合 的 方式 ， 循 序 渐 进 地 讲解 使 用 Dreamweaver CS6 制作 
静 、 动 态 网 页 及 创建 网 站 的 方法 与 技巧 。 全 书 分 为 14 草 ， 介 绍 了 Dreamweaver CS6 
的 特点 、 功 能 、 使 用 方法 和 技巧 。 有 具体 内 容 包 括 : 网 页 制作 基础 知识 、Dreamweaver 
CS6 简介 、 网 站 的 构建 与 管理 、 处 理 文 字 与 图 形 、 制 作 超 链接 、HTML 与 CSS 基础 、 
表格 和 AP 元 素 、 创 建 框 架 网 页 、 应 用 表单 、Dreamweaver 的 内 置 行为 、 制 作 多 媒体 
网 页 、 统 一 网 页 风格 、 动 态 网 页 基础 儿童 教育 网 站 设计 综合 实例 等 。 

本 书 实 例 丰 富 、 内 容 翔 实 、 操 作 方 法 简单 易学 ， 不 仅 适 合 对 网 页 制作 和 网 站 管 
理 感 兴趣 的 初 、 中 级 读者 学 习 使 用 ， 也 可 供 从 事 网 站 设计 及 相关 工作 的 专业 人 士 参 
考 。 

本 书 附 有 一 张 光 盘 ， 内 容 为 教材 综合 实例 部 分 所 有 网 页 文件 的 源 代 码 和 操作 过 
程 录 屏 讲解 动画 以 及 专 为 教师 授课 准备 的 PPT 文件 ， 供 读者 学 习 和 教师 授课 使 用 。 
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随 看 党 带 的 普及 ， 上 网 变 得 越 来 越 方便 ， 就 连 以 前 只 有 专业 公司 才能 提供 的 Web 服务 ， 
现在 许多 普通 的 宽带 用 户 也 能 做 到 。 您 是 否 也 有 种 冲动 ， 想 上 自己 来 制作 网 站 ， 为 自己 在 网 上 
安 个 家 ? 也 许 你 会 党 得 网 页 制作 很 难 ， 然 而 如 果 使 用 Dreamweaver CS6， 即 使 制作 一 个 功能 
强大 的 网 站 ， 也 是 件 非常 容易 的 事情 。 

被 誉 为 “网 页 制作 三 剑客 ”之 一 的 Dreamweaver CS6 是 若 名 影像 处 理 软件 公司 Adobe 最 
新 推出 的 网 页 设计 制作 工具 ， 是 继 Dreamweaver CS5 之 后 的 升级 版 本 ， 是 目前 最 完美 的 网 站 
制作 工具 之 一 。Dreamweaver CS6 是 一 种 专业 的 HTML 编辑 器 ， 用 于 对 Web 站 点 、Web 页 
和 Web 应 用 程序 进行 设计 、 编 码 和 开发 。 无 论 您 喜欢 二 接 编写 HTML 代码 ， 还 是 侦 爱 “所 
见 即 所 得 ”的 工作 环境 ，Dreamweaver CS6 都 会 为 您 提供 许多 方便 的 工具 ， 助 您 迅速 局 效 地 
制作 网 站 。 

全 书 分 为 14 革 ， 介 绍 了 Dreamweaver CS6 的 特点 、 功 能 、 使 用 方法 和 技巧 。 具 体内 容 
包括 : 网 页 制作 基础 知识 ，Dreamweaver CS6 简介、 网 站 的 构建 与 管理 、 人 处理 文字 与 图 形 、 
制作 超 链接 、HTML 与 CSS 基础 、 表 格 和 AP 元 素 、 创 建 框架 网 页 、 应 用 表单 、Dreamweaver 
的 内 置 行为 、 制 作 多 媒体 网 页 、 统 一 网 页 风格 、 动 态 网 页 基础 儿童 教育 网 站 设计 综合 实例 等 。 

本 书 实例 丰 宇 、 内 容 翔 实 、 操 作 方 法 简单 多 学， 不 仅 适 合 对 网 页 制作 和 网 站 管理 感 兴 
的 初 、 中 级 谈 者 学 习 使 用 ， 也 可 供 从 事 网 站 设计 及 相关 工作 的 专业 人 士 参 考 。 

本 书 在 结构 上 力求 内 容 丰 军 、 结 构 清 晰 、 实 例 典 型 、 讲 解 详 尽 、 军 于 局 发 性 ;在 风格 上 
力求 文字 精炼 、 脉 络 清晰 。 另 外 ， 在 文章 内 容 中 包括 了 大 量 的 “注意 ”与 “技巧 ”” 它们 能 够 
提醒 读者 可 能 出 现 的 问题 、 容 易 犯 下 的 错误 以 及 如 何 避 人 免 ， 还 提供 操作 上 的 一 些 捷径 ， 使 议 
者 在 学 习 时 能 够 事半功倍 、 技 局 一 筹 。 

为 了 配合 各 学 校 师 生 利用 此 书 进 行 教学 的 需要 ， 随 书 配 赠 多 媒体 光盘 ， 包 含 全 书 实例 操 
作 过 程 配 音 讲 解 孙 屏 AVI 文件 和 实例 结果 文件 和 素材 文件 ， 以 及 专 为 老师 教学 准备 的 
Powerpoint 多 媒体 电子 教案 。 

本 书 由 三 维 书屋 工作 室 总 策划 ， 由 胡 仁 喜 、 杨 雪 静 、 间 昌 丽 、 康 士 廷 、 张 日 晶 、 琴 培 、 
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培 合 、 尘 文 形 、 路 纯 红 、 周 冰 、 王 艳 池 、 王 安 等 编写 。 

书 中 主要 内 容 来 自 于 作者 儿 年 来 使 用 Dreamweaver 的 经 验 总 结 ， 也 有 部 分 内 容 取 自 于 国 
内 外 有 基文 献 资 料 。 虽 然 笔 者 几 易 其 和 神 ， 但 由 于 时 间 人 仓促， 加 之 水 平 有 限 ， 书 中 丝 漏 与 失误 
在 所 难免 ， 恳 请 广大 读者 联系 win760520@126.com 提 出 宝贵 的 批评 意见 。 欢 迎 登 录 
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本 章 介 绍 Dreamweaver CS6 中 文 版 的 基础 知识 ， 内 容 包 括 : 


”Dreamweaver CS6 的 新 增 功能 和 安装 ， 简 单 介绍 其 用 户 界面 以 及 创建 与 保 : 
: 存 文件 的 方法 等 。 Dreamweaver CS6 是 著名 影像 处 理 软件 公司 Adobe 推出 ; 
:的 最 新 网 页 设计 制作 工具 ,是 继 :Dreamweaver CS6 之 后 的 升级 版 本 ， 是 和 
”前 最 完美 的 网 站 制作 工具 之 一 。 
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1.1 Dreamweaver CS6 的 新 功能 


Adobe Dreamweaver CS6 提供 众多 功能 强大 的 可 视 化 设计 工具 、 应 用 开 友 环境 以 及 代 
码 编辑 支持 ， 从 对 基于 CSS 的 设计 的 领先 文 持 到 手工 编码 功能 ，Dreamweaver CS6 提供 
了 一 个 集成 、 蜗 效 的 创作 平台 。 其 功能 强大 ， 使 得 各 个 层次 的 开发 人 员 和 设计 人 员 都 能 够 
快速 创建 界面 吸引 人 的 基于 标准 的 网 站 和 应 用 程序 。 

Dreamweaver CS6 的 开发 环境 精简 而 高 效 。 由 于 同 新 的 Adobe CS Live 在 线 服务 
Adobe BrowserLab 集成 ， 开 上 有 人员 能 以 可 视 方 式 或 和 百 接 在 代码 中 进行 设计 ， 使 用 内 容 管 
理 系 统 开 友 页 面 并 实现 精确 的 浏览 占 兼 容 性 测试 。 使 用 Dreamweaver CS6 及 所 选择 的 服 
务 器 技术 , 开发 人 员 可 以 构建 功能 强大 的 Internet 应 用 程序 , 从 而 使 用 户 能 连接 到 数据 库 、 
Web 服务 和 旧式 系统 。 

下 和 面 简要 介绍 Dreamweaver CS6 的 主要 新 增 功能 和 增强 功能 。 

(1) jQuery Mobile 文 持 。 使 用 更 新 的 jQuery Mobile 文 持 可 以 便捷 地 为 iOS 和 
Android 平台 建立 本 地 应 用 程序 。 信 助 jQuery 代 人 码 提示 可 以 加 入 局 级 交互 性 功能 ， 轻 松 
地 为 网 页 添加 互动 内 容 ， 同 时 简化 移动 开发 工作 流程 。 

(2) PhoneGap 支持。 更 新 的 Adobe PhoneGapTM 文 持 可 轻松 为 Android 和 1OS 建 
浆 和 封 厂 本 地 应 用 程序 。 在 Dreamweaver 中， 借助 PhoneGap 框 染 ， 通 过 改编 现 有 的 
HTML 代码 将 现 有 的 HTML 转换 为 手机 应 用 程序 ， 并 使 用 PhoneGap 模拟 志 检 得 设计 。 
局 动 此 服务 后 ,可 以 将 Web 应 用 程序 发 布 到 PhoneGap Build， 然 后 此 联机 服务 针对 多 个 
本 机 应 用 程序 环境 (包括 Android、iOS、Blackberry 和 WebOS) 打包 并 输出 应 用 程序 。 

(3) 多 屏 荞 预览。 利用 更 独 的 “多 屏 硕 预 急 ”面板 可 以 检查 智能 手机 、 平 板 电 脑 和 
台式 计算 机 所 建立 项 目的 显示 画面 。 使 用 媒 体 伍 询 文 持 ,该 增强 型 面板 现在 能 够 为 各 种 不 
同 设备 设计 样式 并 将 呈现 内 容 可 视 化 ， 让 用 户 检 答 HIMLS 内 容 呈 现 。 

(4) CSS3/HTMLS 支持 。 使 用 支持 CSS3 的 CSS 面板 创建 样式 。 设 计 视 图 文 持 媒 
体 得 询 ， 可 根据 屏幕 大 小 应 用 不 同 的 样式 。 设 计 视 图 与 代码 提示 文 持 HTML5。 

(5)Adobe Business Catalyst 集成 。Dreamweaver CS6 集成 了 Adobe Business Catalyst， 
使 用 Adobe Business Catalyst@ 平台 《和 需 单 独 购买 ) 可 以 开发 复杂 的 电子 商务 网 站 ， 无 需 
编写 任何 服务 需 问 编 权 ; 使 用 Business Catalyst 面板 连接 并 编辑 利用 Adobe Business 
Catalyst 建立 的 网 站 ;利用 托管 解决 方案 建立 电子 商务 网 站 。 

(6) W3C 验证 。 使 用 W3C 联机 验证 服务 ， 以 确保 标准 网 页 设计 的 精确 性 。 

(7) 基于 流体 网 格 的 CSS 布局。 在 Dreamweaver 中 使 用 基于 CSS3 的 流体 网 格 布 
局 ( 目 适 应 网 格 版 面 ) 系统 , 可 以 创建 能 应 对 不 同 屏 帮 尺寸 的 器 平台 和 竖 浏 览 器 的 流体 ( 基 
于 百分比 ) CSS 布局 。 在 使 用 流体 网 格 生成 Web 页 时 , 布局 及 其 内 容 会 自动 适应 用 户 的 
全 看 装置 (无 论 台 式 计算 机 、 绘 图 板 或 贸 能 手机 )。 

(8) CSS3 过 渡 效 果 。 使 用 CSS 过 渡 效 末 可 将 平滑 属性 变化 应 用 于 页 面 元 素 ， 以 啊 
应 触发 右 事 件 。 币 见 例 子 是 当 光 标 晤 停 在 一 个 荣 单 栏 项 上 时 ， 该 项 会 逐渐 从 一 种 颜色 变 成 
另 一 种 颜色 。 将 CSS 属性 变化 制 成 动画 转换 效 素 ， 可 以 使 网 页 设计 得 顶棚 如 生 ， 在 处 理 
网 页 元 素 和 创建 优美 效果 时 保持 对 网 页 设计 的 精准 控制 。 
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(9) 多 CSS 类 选区 。 现在 可 以 将 多 个 CSS 类 应 用 于 蛙 个 元 素 。 在 应 用 多 个 类 之 后 ， 
Dreamweaver 会 根据 选择 创建 新 的 多 类 。 然 后 ， 新 的 多 头 会 在 CSS 选择 的 其 他 位 置 变 得 
可 用 。 

(10) 艇 入 网 页 字体 。 现 在 可 以 在 Dreamweaver 中 使 用 有 创造 性 的 Web 支持 字体 

(如 Google 或 Typekit Web 字体 )。 将 Web 字体 导入 Dreamweaver 站 点 后 ，Web 字体 
将 在 Web 页 中 可 用 ， 为 网 页 设计 添加 丰富 的 排版 样式 。 


1.2 ”工作 界面 


启动 Dreamweaver CS6 的 步骤 如 下 : 


(1) 执行 “开始 ”| “程序 ”|“Adobe”| “Adobe Dreamweaver CS6” 命 令 ， 局 动 
Dreamweaver CS6 中 文 版 。 


(2) 第 一 次 打开 Dreamweaver CS6 时 ， 会 弹出 “默认 编辑 器 ”对 话 框 ， 如 图 1-1 所 
示 。 可 以 按 个 人 喜好 将 Dreamweaver 设置 为 指定 文件 类 型 的 默认 编辑 器 。 


Adobe Dreamweaver CS6 将 其 自身 设置 为 以 下 文件 类 型 的 默认 编辑 器 : 


[Y] Active Server Pages (asp) [MY] JavaScript Os) 
上 器 Java Server Pages (jsp) [四 层 得 样式 表 (CSS) 
[vlColdFusion (ctm，cfc) [四 可 扩展 标记 语言 (xml) 


站 ] ASF. NET (aspx, ascx) [MXSL 样式 表 (xs1，xslt) 
[vlPHF (php, php3, php4) 


取消 全 选 


图 1-1 “默认 编辑 器 ”对 话 框 
(3) 本 书 采 用 默认 设置 ， 然 后 单 击 “确定 ”按钮 进入 Dreamweaver CS6 的 欢迎 界面 ， 


如 图 1-2 所 示 。 

该 界面 用 于 打开 最 近 使 用 过 的 文档 或 创建 新 文档 , 还 可 以 从 中 通过 产品 介绍 或 教程 了 
解 天 于 Dreamweaver 的 更 多 信息 。 如 果 不 硕 望 每 次 局 动 时 都 打开 这 个 界面 ， 可 以 在 “ 首 
选 参 数 ” 中 修改 设置 。 有 关 “ 首 选 参数 ”对 话 框 的 设置 可 以 参见 本 书 第 11 章 的 介绍 。 

(4) 执行 “文件 ”| “新 建 ” 人 命令， 打开 “新 建文 档 ” 对 话 框 ， 如 网 1-3 所 示 。 

在 Dreamweaver CS6 中 , 使 用 预定 义 的 页 面 布局 和 代码 模板 ,可 以 快速 地 创建 出 比较 
专业 的 页 面 ,Dreamweaver CS6 删除 了 以 前 版 本 布局 中 复 林 的 子 代 选 择 右 , 符 换 为 更 新 的 、 
简化 的 CSS 起 始 布 局 。 此 外 用 户 还 可 以 创建 自己 的 CSS 布局 ， 并 将 它们 添加 到 配置 文 
(人 天 而。 

(5) 在 “新 建文 要 ”对 话 框 中 ， 选 择 “空白 页 ”类 别 的 HTML 基本 项 ， 布 局 “无 ” 
然后 单 击 “创建 ”按钮 进入 Dreamweaver CS6 中 文 版 的 工作 界面 ， 如 图 1-4 所 示 。 

从 图 中 可 以 看 出 Dreamweaver CS6 在 界面 外 观 和 功能 图 标 按钮 上 与 上 一 版 本 没 太 大 
区 别 ， 采 用 了 上 典型 的 Adobe 界面 风格 ， 整 体 设计 清新 人 徐 活 。 
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图 1-4 Dreamweaver CS6 的 工作 环境 


单 击 “ 设 计 器 ”按钮 训 轩 ,在 弹出 的 下 拉 列 表 中 可 以 看 到 Dreamweaver CS6 推出 的 
11 种 工作 区 外 观 模式 : 应 用 程序 开发 人 员 、 应 用 程序 开发 人 员 〈( 启 级)、Business Catalyst、 
经 典 、 编 码 器 、 编 码 人 员 ( 融 级 )、 设 计 右 、 设 计 人 员 〈 紧 并 )、 双 重 屏 供 、 流 体 布局 和 移 
动 应 用 程序 。 不 同 的 工作 区 外 观 模式 适用 于 不 同 层次 、 不 同 喜 好 的 设计 者 。 无论 是 一 个 程 
序 员 还 是 一 个 设计 师 , 都 可 以 在 Dreamweaver CS6 给 出 的 工作 区 外 观 模 式 中 找到 合适 的 页 
面 设计 模式 。 

Business Catalyst、 流 体 布 局 和 移动 应 用 程序 是 Dreamweaver CS6 狐 增 的 设计 模式 。 
通过 与 Adobe Business Catalyst@ 平台 〈 需 单独 购买 ) 集成 可 以 开发 复杂 的 电子 商务 网 站 ， 
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建立 并 代 管 免费 试用 网 站 。 登 录 到 Business Catalyst 站 点 之 后 ， 还 可 以 直接 在 
Dreamweaver 的 “Business Catalyst” 面 板 中 管理 Business Catalyst 模块 。 

使 用 基于 CSS3 的 流体 网 格 布局 功能 ， 用 户 可 以 创建 能 应 对 不 同 屏 幕 尺 寸 的 路 平台 
和 器 浏览 器 的 兼容 网 页 设计 。 

使 用 更 新 的 jQuery Mobile 文 持 可 以 方便 地 为 iOS 和 Android 平台 建 并 本 地 应 用 
程序 ， 针 对 热门 平板 电脑 和 智能 手机 建立 触及 移动 受众 的 应 用 程序 ， 同 时 简化 移动 开发 工 
作 流 程 。 在 建立 移动 应 用 程序 时 ， 可 利用 Adobe PhoneGap 的 文 持 来 缩短 制作 时 间 。 


1.2.1 菜单 栏 


与 其 他 多 数 软 件 类 似 ，Dreamweaver CS6 的 荣 单 栏 位 于 工作 环境 最 上 方 ， 如 图 1-5 所 


也 忻 {fF) 编辑 全 查看 0 质 尺 [I 修改 册 ) 格式 名 ) 前 仿 [C】 站 点 t】 窗口 [内 ”和 帮助 i) 
图 1-5 亲 早 栏 


1.2.2 工具 栏 


工具 栏 主要 集中 了 一 些 可 以 在 文档 的 不 同 视 网 之 间 快 速 切换 的 利用 命令 , 以 及 一 些 与 
但 看 文档 、 在 本 地 和 远程 站 点 间 传 输 文 档 有 关 的 常用 命令 和 选项 。Dreamweaver CS6 中 的 
工具 栏 如 图 1-6 所 示 。 

:| 代码 | 拆 分 | 设计 || 实时 视图 | 哆 . 加 . 内 B22 丘 XO 标题 无 标题 六 业 


图 1-6 工具 栏 

在 工具 栏 中 包含 了 一 些 图 标 按钮 和 弹出 末日 , 可 以 用 不 同 的 方式 来 查看 文档 窗口 或 者 
预览 设计 效果 ， 具 体 各 个 按钮 图 标的 功能 如 下 : 

> 代 碍 |， 显示 代码 视图 。 

> ”| 拆 仙 |， 在 同一 屏幕 中 以 水 平 对 比 的 方式 显示 代码 和 设计 视图 。 

Dreamweaver CS6 界面 项 端的 “布局 ”按钮 国 "， 也 用 于 设置 页 面 的 布局 。 他 和 工具 
栏 中 的 | 语 焉 站 全 | 设计] 按钮 功能 相同 。 不 同 的 是 ， 使 用 “布局 ”按钮 的 下 拉 列 表 ， 可 以 重 
下 分 割 文档 窗口 ， 即 代码 视图 和 设计 视图 以 垂下 对 比 的 方式 呈现 。 

> ”上 六 训 |， 显 示 设 计 视 图 。 

> 实时 仿 碍 |, 单 击 该 按钮 ， Dreamweaver 将 以 黄色 突出 显示 浏览 器 为 呈现 该 页 面 而 
执行 的 代码 版 本 ， 此 代码 是 不 可 编辑 的 。 再 次 单 击 该 按钮 ， 即 可 返回 到 可 编辑 的 “ 代 人 码 ” 
倪 图 。 

> 实时 钢 图 |， 在 “设计 ”视图 或 “ 折 分 ”视图 下 ， 单 击 该 按钮 可 以 在 不 打开 浏览 器 
的 情况 下 实时 预 匈 页面 的 效果 。 再 次 单 击 该 按钮 , 即 可 返回 到 可 编辑 的 “ 议 计 ”视图 或 “ 折 
分 ”视图 。 如果 在 “代码 ”视图 下 单 击 该 按钮 , 则 Dreamweaver 的 工作 界面 目 动 转换 为 “ 折 
分 ”视图 。 上 半 部 分 显示 可 编辑 的 代码 ， 下 半 部 分 显示 页 面 的 实时 预览 效果 。 

“实时 视图 ”可 以 使 用 户 在 Dreamweaver 窗口 中 实时 租 看 代码 的 效 末 , 包括 JavaScript 
特效 。 在 “设计 ”视图 中 可 以 随时 切换 到 “实时 ”视图 ， 切 换 到 “实时 视图 ”之 后 ,，“ 设 
计 ” 视 图 保持 冻结 ， 用 户 仍 然 可 以 在 Dreamweaver 中 的 任何 其 他 传统 视图 (如 “代码 ”/ 
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ver (FAXB 站 文明 款 准 实 创 直 诊 
< 拆 分 ”) 之 间 进 行 切 换 .“ 代 码 ”视图 保持 可 编辑 状态 ， 因 此 可 以 更 改 代 码 ,， 然 后 刷新 “ 实 
时 视图 ”以 查看 所 进行 的 更 改 是 否 生 效 。 也 就 是 说 ,借助 “实时 视图 ”， 用 户 可 以 直接 在 
真实 的 浏览 器 环境 中 设计 网 页 ， 同 时 仍 可 以 直接 访问 代码 。 呈 现 的 屏幕 内 容 会 立即 反映 出 
对 代码 所 做 的 更 改 。 

此 外 ,“ 实 时 视图 ”的 男 一 优势 是 能 够 冻结 JavaScript。 例 如 ， 用 户 可 以 切换 到 “ 实 
时 视图 ”并 悬 停 在 由 于 用 户 交 互 而 更 改 颜 色 的 基于 Spry 的 表格 行 上 ,冻结 JavaScript 时 ， 
“实时 视图 ”会 将 页 面 冻 结 在 其 当前 状态 。 然 后 ， 用 户 可 以 编辑 CSS 或 JavaScript 并 刷 
新 页 面 以 得 看 更 改 是 否 生 效 。 访 功能 在 得 看 并 更 改 无 法 在 传统 “设计 ” 视 几 中 看 到 的 弹出 
ee 

> Re 可 以 打开 CSS 检查 模式 ， 以 可 视 方式 调 
整 设 计 ， ee 

en ng 
框 和 边 距 ， 轻 松 切换 CSS 属性 ， 且 无 需 恋 取代 码 ， 或 使 用 独立 的 第 三 方 实 用 程序 。CSS 
检查 模式 在 具有 某 些 设置 时 最 有 用 ， 如 : CSS 样式 面板 以 当前 模式 打开 、 启 用 拆 分 代码 / 
实时 视图 、 局 用 实时 视图 。 如 果 没 有 这 些 设置 中 的 任何 一 种 ， 将 在 文档 窗口 项 部 显示 相关 
的 提示 信息 。 

> ”区 ， 多 屏幕 预览 。 智能 手机 、 平 板 电 脑 和 台式 计算 机 所 建立 项 目的 显示 男 
i 该 功能 能 够 让 用 户 检查 gg 内 容量 现 。 

> ”| 蔷 -， 在 浏览 器 中 预览 / 调试 。 利 用 该 功能 按钮 的 下 拉 菜 单 ， 可 以 在 设 定 的 浏览 
器 中 预览 或 调试 文档 。 
站 |， 文 件 管理 下 拉 菜 单 。 
”使 用 W3C 联机 验证 服务 ， 以 确保 标准 网 页 设计 的 精确 性 。 
一. 跨 浏 览 器 兼容 性 检查 的 下 拉 菜 单 。 
二 : 可 视 化 助理 下 拉 末 单 。 可 以 使 用 不 同 的 可 视 化 助理 来 设计 页 面 。 
GG :刷新 设计 视图 。 
“标题 ”: 设置 文档 的 标题 (页 面 <title> </title> 标 签 之 间 的 内 容 )。 


1.2.3 “插入 ”面板 


Dreamweaver 早期 的 “搬入 ” 栏 以 选项 卡 方式 显示 在 标题 栏 下 方 。Dreamweaver CS6 
将 “插入 ” 栏 整 合成 了 一 个 浮动 面板 ， 俘 对 在 界面 右 侧 的 浮动 面板 组 中 。 

单 击 文档 窗口 右 侧 浮动 面板 组 中 的 “插入 ”按钮 ， 即 可 弹出 “插入 ”面板 ， 如 图 1-7 
所 示 。 

“插入 ”面板 的 初始 视图 为 “第 用 ”面板 。 单 击 “ 插 入 ”面板 中 “各 用 ”面板 右 侧 

的 倒 三 角形 按钮 , 即 可 在 弹出 的 下 拉 列 表 中 选择 需要 的 面板 , 从 而 在 不 同 的 面板 之 间 切 换 ， 
如 图 1-8 所 示 。 

“插入 ”和 面板 有 10 组 选项 ， 每 组 中 有 不 同类 型 的 对 象 。 使 用 “插入 ”表单 中 的 命令 
也 可 以 插入 各 种 对 象 ， 使 用 有 亲 单 还 是 使 用 “插入 ”面板 根据 用 户 的 习惯 决定 。 

默认 状态 下 ,“ 插 入 ”面板 中 的 对 象 图 标 以 灰色 显示 ， 光 标 移 动 到 图 标 上 时 显示 为 彩 
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色 。 如 果 用 户 习惯 于 彩色 图 标 ， 可 以 打开 图 1-8 右 独 所 示 的 下 拉 列 表 之 后 ， 单 击 “ 上 颜色 疼 
标 ” 命 令 ， 即 可 以 彩色 显示 对 象 图 标 。 如 条 单 击 下 拉 列 表 中 的 “隐藏 标签 ”命令 ， 则 上 内 显 
示 对 象 图 标 而 不 显示 图 标 右 侧 的 标签 。 
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2 单 击 这 里 打开 下 拉 菜单 。 富 用 入 
第 用 ~ 机 局 
oc 并 超级 以 接 ”> 
二 电子 邮件 链接 Si 
[= ”电子 邮件 链接 -i Nobile 
命名 错 记 


Se 水平线 
a 收藏 来 
F5| Y 颜色 图 标 
插入 Div 标签 i 隐 若 标签 
又 | -图像 回国 . 
2 oe 和 掏 - 媒体 
疙 ”构件 适 构件 
日 期 Es y 
图 1-7 “插入 ”和 面板 图 1-8 在 不 同 面 板 之 间 进 行 切换 


1.2.4 文档 窗口 


文档 窗口 用 于 显示 当前 创建 或 者 编辑 的 文档 , 可 以 根据 选择 显示 方式 的 不 同 而 显示 不 
同 的 内 容 。 读 者 的 操作 结果 都 会 在 文档 窗口 中 显示 。 不 管 是 利用 Dreamweaver CS6 提供 的 
工具 或 命令 编号， 还 是 直接 在 代码 视图 中 编号， 所 进行 的 工作 都 在 文档 窗口 中 完成 。 在 文 
档 窗口 中 也 包含 了 所 编辑 或 创建 文档 的 所 有 HTML 代码 。 

单 击 工具 栏 中 的 | 遵 寺 按钮 ， 切 换 到 设计 视图 ， 文 档 窗口 显示 的 内 容 与 浏览 器 中 显示 
的 内 容 相 同 ， 如 图 1-9 所 示 。 使 用 Dreamweaver CS6 提供 的 工具 或 命令 ， 可 以 方便 地 进行 
创建 、 编 辑 文档 的 各 种 工作 ， 即 使 完全 不 懂 HTML 代码 的 读者 也 可 以 制作 出 精美 的 网 页 。 

单 击 工具 栏 中 的 ( 懂 怒 按钮 ， 切 换 到 代码 视图 ， 在 文档 窗口 中 显示 的 是 当前 文档 的 代 
码 ， 如 图 1-10 所 示 。 尽 管 在 设计 视图 中 可 以 完成 绝 大 部 分 工作 ， 但 是 有 些 工 作 还 是 必须 
运用 代码 编辑 的 ， 这 就 必须 到 代码 视图 中 进行 ， 比 如 编辑 插入 的 脚本 ， 对 脚本 进行 检查 、 


调试 等 。 
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1 了 古 汪 二 4 
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] -由 出 | 
由 HH a 
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i 通 呈 址 营 汪 看 下: 训 肝 看 克 同上 ._. 开 卫 六 . 


村 克 现 刚 | fi 9933 .9 节 |” 嘿 剖 和 YT 
三 而 而 忆 硬 “|| 而 柜 帮 i | | 沈 涉 匡 Ps wr 扣 22 


图 1-9 “设计 ”视图 图 1-10 “代码 ”视图 
在 编写 文档 中 ， 有 时 可 能 必须 兼顾 设计 样式 和 实现 代码 ， 这 时 束 需 要 代 人 码 与 设计 同 屏 
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Dopeemmoyeevar CEA 让 区 和 抽 每 准 实 创 生 机 

显示 。 单 击 工具 栏 中 的 二 殉 按钮 ， 就 可 以 实现 这 个 功能 ， 如 图 1-11 所 示 。 此 外 ， 在 
Dreamweaver CS6 的 “ 拆 分 ”模式 下 ， 单 击 界面 左上 角 的 国 7 按 钮 ， 在 弹出 的 下 拉 菜 单 中 
选择 “垂直 拆 分 ”选项 ， 还 可 以 垂直 分 隔 文档 窗口 ， 如 图 1-12 所 示 。 


(DW mr tr = 二 + 国 。 = DN 二 1 蝇 i 
Re [ “查看 0 搬 共 区 ii 则 机 间 ii 相 民 而) 只 亲 -ii 用 旧 全 曾 百 呈 屋 的 0 | 文件 [) 网 铺 全 ) 要 碍 (7) 入 入 0) 食 台 加 ) 本 式 友 ) 全 令 M) 站 45 OO WO0 
3 | 具 共 入 基 大 鲍 , 作 划 本 岳 39 古 ,从 牙 重生 月 牙 大 信 33 和 大 泰 大 全 199 基 |， 由 以 共 民 基 大 全 , 凡生 复生 大 完 , 功 凡 本 牟 划 向 
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| 吻 - 可 上 腊 轨 FE 芭 . int 国 下 可 | 区 吕 | 员 分 上 交 和 和 - 二 和 [ 卫 人 
| | 
1 天 1 次 盐 豆 二 大 一 -一 一 一 | 
| < En om mr 加 全 二 陨 -| 流 C3 李 式 
bs py a 户 二 志和 = 二 元 
| 
| i 《的 村 叶 交 亚 相 es 9 | 
| 王 到 Sa -or :arskce ro : | 起 二 
I 时 ph | 营 S 3 地 中 条 库 
六 盯 | 和 ; : Fm 
| 
F | 


] 二 二 正定 肢 ” 儿 革 是 训 “ 同 守 J 于 全 | rbd 区 [| 


| | 人 人 ER 和 区 直面 | = YY 5 ， 扣 相 吉 世上 | 


雍 守 量 直 过 二 1 时 玫 间 本 EN a ; A | 于 册 区 t 
时 


[ 司 | 
ia 忆 二 | -二 加 


时 可 | ET 天下 于 = pp E Ce 
| 中 目 释 一 刚 fei nilhbw 本 。 本 | 手 杯 加 Vr 有 由 aa 二 1 时 市 际 ” | «9 ye -一 ~ sawr 4% ww 李 信 有 ) York Te il pr a A 是 
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图 1-11 水 平 拆 分 代码 /设计 视图 图 1-12 垂直 拆 分 代码 /设计 视图 
这 样 ， 同 一 文档 的 两 种 视图 可 以 在 同一 窗口 中 对 照 显 示 ， 并 且 当 选中 设计 视图 或 者 代 
人 码 视 图 中 的 部 分 时 ， 在 为 外 的 代 人 码 视图 或 者 设计 视图 中 也 会 选中 相同 的 部 分 。 
1.2.5 “属性 ”面板 


选中 东 一 对 象 后 ,“ 属 性 ”面板 可 以 显示 农 选 中 对 象 的 属性 ， 还 可 以 在 属性 面板 中 修 
改 被 选 对 象 的 各 项 属性 值 。“ 属 性 ”面板 如 图 1-13 所 示 。 


间或 加 无 w 并 | 天 着 
IW0Y | 还 ww| 辆 报 岂 人 训 加 目标 怕 


量 元 赂 。“ 求 平 冰 ) 恩 让 ww 宣 何 ) | 
| 甘 。 重 直 1 哎 i/ “高 00 标题 量 } [] 


图 1-13 “属性 ”面板 


“属性 ”和 面板 分 成 上 下 两 部 分 。 不同 的 对 象 有 不 同 的 属性 , 因此 选中 不 同 对 象 时 ,“ 属 
性 ”面板 显示 的 内 容 是 不 同 的 。 单 击 面板 右 下 角 的 去 按钮 可 以 关闭 “属性 ”面板 的 下 面部 


入 
ee) 


这 时 原来 的 立 按 钮 变 成 之 按钮 ， 单 击 此 按钮 可 以 重新 打开 “属性 ”面板 的 下 面部 分 。 
1.2.6 “浮动 ”面板 


“浮动 ”面板 位 于 Dreamweaver CS6 工作 环境 右 侧 ， 包 括 面 板 如 图 1-14 所 示 。 在 及 
单 栏 中 的 “窗口 ”下 拉 有 末 单 中 可 以 打开 或 者 和 天 财 这 些 和 面板 。 例 如 要 打开 “行为 ”和 面板 ， 可 
以 执行 “窗口 ” “ 行 》 33 命 今 . 

打开 “行为 ” 面板 还 可 以 通过 单 击 浮动 面板 的 “标签 检查 器 ”标签 ， 再 单 击 “行为 ” 
子 标签 来 打开 。 打 开 “ 行 为 ”和 面板 后 的 Dreamweaver CS6 界面 如 图 1-15 所 示 。 
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图 1-14 “窗口 ”菜单 图 1-15 “行为 ”面板 


1.3 ”对 文件 的 操作 


Dreamweaver CS6 的 文件 操作 是 制作 网 页 最 基本 的 操作 , 包括 网 页 文件 的 打开 、 保 存 、 
关闭 等 。 


1.3.1 打开 文件 


要 编辑 一 个 网 页 文件 ， 必 须 先 打开 该 文件 。Dreamweaver CS6 可 以 打开 多 种 格式 的 文 
件 ， 例 如 htm、html、shtml、asp、jsp、php、js、aspx、dwt、xml、1lbi、as、css 等 。 
执行 “文件 ”| “打开 ”命令 ， 弹 出 “打开 ”对 话 框 ， 如 图 1-16 所 示 。 
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图 1-16 “打开 ”对 话 框 
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BETTERYET (CCA YXB 字 总 
“打开 ”对 话 框 与 其 他 的 Windows 应 用 程序 一 样 ， 可 以 在 对 话 框 中 选中 要 打开 的 文 
件 名 , 然后 单 击 “ 打 开 ” 按 钮 即 可 打开 该 文件 ; 也 可 通过 在 对 话 框 中 双击 所 需 的 文件 打开 。 
名 Dreamweaver CS6 还 没有 启动 ， 也 可 以 右键 单 击 要 打开 的 文件 , 在 弹出 采 单 中 执行 “使 
用 Dreamweaver CS6 编辑 ”命令 打开 该 文件 。 

如 果 已 打开 框架 集 文 件 ， 要 打开 框 染 集中 的 某 一 个 框架 页 ， 可 以 先 把 光标 定位 在 需要 
打开 文件 的 框架 内 ， 然 后 执行 “文件 ”| “在 框架 中 打开 ”命令 ， 弹 出 “选择 HTML 文 
件 ” 对 话 框 ， 如 图 1-17 所 示 。 
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图 1-17 “选择 HTML 文件 ”对 话 框 


1. 3. 2 创建 文件 


创建 新 的 网 页 文件 ， 有 以 下 两 种 方法 : 

(1) 在 Dreamweaver CS6 中， 执行“ 文件”| “新 建 ” 命 令 ， 弹 出 “新 建文 要 ”对 
话 框 ， 如 网 1-18 所 示 。 选 择 要 创建 文件 的 类 型 和 布局 ， 然 后 单 击 “ 创 建 ” 按 钮 ， 即 可 创 
建新 文件 。 

Dreamweaver CS6 文 持 HIML5。 在 “文档 类 型 ”下 拉 列 表 框 中 选择 “HTML5”， 可 
创建 HTMLS5 页 面 。 

(2) 如 果 要 基于 模板 创建 文档 ， 则 先 在 “新 建文 档 ” 对 话 框 中 单 击 “模板 中 的 页 ” 
标签 ， 切 换 到 图 1-19 所 示 的 “新 建文 档 ” 对 话 框 。 在 该 对 话 框 中 单 击 选 择 模 板 的 站 点 ， 
然后 再 选择 需要 的 模板 文件 。 这 时 可 以 通过 预 欠 区 域 浏 览 所 选择 模板 的 样式 ， 看 是 否 符 合 


亚 京 想 


DD 自己 的 要 求 。 选 择 需要 使 用 的 模板 后 ， 单 击 “ 创 建 ”按钮 ， 即 可 创建 基于 模板 的 新 文件 。 
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“新 建文 档 ” 对 话 框 “新 建文 档 ” 对 话 框 


1.3.3 存储 文件 


保存 网 页 文件 的 方法 随 保存 文件 的 目的 不 同 而 不 同 。 

如 果 同 时 打开 了 多 个 网 页 文件 ， 则 执行 “文件 ”| “保存 ”或 “文件 ”| “为 存 为 ” 
命令 只 保存 当前 编辑 的 页 面 。 要 你 存 打开 的 所 有 页 面 则 执行 “文件 ”| “保存 全 部 ”命令 。 
在 是 第 一 次 保存 该 文件 ， 则 执行 “文件 ”| “保存 ”命令 也 会 弹出 “为 存 为 ”对 话 框 ， 如 
1-20 所 示 。 夯 文件 已 你 存 过 ， 则 执行 “文件 ”| “你 存 ” 命 令 时 ， 和 下 接 你 存 文件 。 

关于 框 染 的 文件 你 存 比 较 特殊 ， 具 体 方法 将 在 后 面 的 相关 革 市 中 进行 详细 的 介绍 。 

如 琳 希 望 将 一 个 网 页 文档 以 模 极 的 形式 保存 ， 先 切换 到 要 保存 的 文件 所 在 的 窗口 ， 执 
行 “ 文 件 ”| “为 存 为 模板 ”命令 ， 则 会 打开 “ 故 存 模板 ”对 话 框 ， 如 图 1-21 所 示 。 在 
该 对 话 框 的 “站 点 ”下 拉 列 表 框 中 选择 一 个 你 存 该 模板 文件 的 站 点 ， 然 后 在 “为 存 为 ”后 
面 的 文本 框 中 输入 文件 的 名 称 ， 最 后 单 击 “ 你 存 ” 按 钮 完成 文件 的 你 存 。 
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图 1-20 “另存 为 ”对 话 框 图 1-21 “另存 模板 ”对 话 框 
1.4 动手 练 一 练 


1. ”启动 Dreamweaver CS6 新 建 一 个 html 空 文件 ， 注 意 观 罕 Dreamweaver CS6 中 文 
版 的 工作 界面 。 


2. 熟悉 各 菜单 以 及 “插入 ”面板 中 各 子 面板 的 图 标 按钮 。 


1.5 思考 题 


1. 有 哪些 方法 可 以 启动 Dreamweaver CS6? 
2. “浮动 ”和 面板 有 哪些 窗口 ， 各 有 什么 功能 ? 
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本 章 将 介绍 HTML 和 CSS 的 基本 知识 及 使 用 方法 。 内 容 包 括 : HTML ， 
”的 概念 ;HTML 源 文件 的 构成 ; 各 类 常用 HTML 标记 的 功能 及 使 用 ; CSS | 
”样式 表 的 作用 ; CSS 样式 表 的 组 成 ; 样式 表 的 层 二 顺序 以 及 样式 表 的 部 分 ， | 
;常用 属性 和 值 。 HTML 标记 和 CSS 样式 表 是 网 页 文件 的 基石 。 HTML 和 CSS ， | 
;是 网 页 制作 的 基础 ， 读 者 应 该 认真 掌握 。 ] 
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2.1 HTML 基础 


在 了 解 Dreamweaver CS6 对 源 代 但 的 控制 特性 之 前 ， 需 要 了 解 一 些 关 于 HTML 的 相 
2 Ts 


2.1.1 什么 是 HTML 


HTML 是 Hypertext Markup Language 的 首 字 母 缩写 ， 通 第 称 作 超 文本 标记 语言 。 它 
是 Internet 上 用 于 编写 网 页 的 主要 语言 。 

HTML 是 纯 文本 类 型 的 语言 ， 使 用 HTML 编写 的 网 页 文件 也 是 标准 的 纯 文本 文件 。 
您 可 以 用 任何 文本 编辑 器 ， 例 如 Windows 的 “记事 本 ”程序 打开 它 ， 查 看 其 中 的 HTML 
源 代码 ， 也 可 以 在 使 用 浏览 器 打开 网 页 时 ， 通过 “查看 源 文件 ”命令 查看 网 页 中 的 HTML 
人 

HTML 语法 非常 简单 ， 它 采用 简捷 明了 的 语法 命令 ， 通 过 对 各 种 标记 、 元 素 、 属 性 、 
对 和 象 等 的 设置 建 并 与 图 形 、 声 首 、 视 频 等 多 召 体 信息 以 及 其 他 超 文本 的 链接 。 

HTML 的 发 展 与 Internet 上 的 WWW 浏览 操作 的 发 展 是 分 割 不 开 的 。WWAW 是 World 
Wild Web 的 简称 , 更 方便 的 称呼 是 3W 或 The Web, 即 “ 万 维 网 ” 它 是 一 种 建立 在 Internet 

上 的 全 球 性 的 、 交 互 的 、 动 态 、 多 平台 、 分 布 式 的 图 形 信 息 系 统 。WWW 人 人 循 HITP 协议 
(Hypertext Transfer Protocol， 超 文本 传输 协议 )， 主 要 以 “ 超 文 本 ”(Hypertext) 或 “起 
媒体 ”(Hypermedia) 的 形式 提供 信息 。 通 津 所 称 的 浏览 网 页 ， 束 是 指 WWW 操作 。 

全 看 网 由 内 容 必 须 使 用 网 页 浏 贤 絮 .浏览 磊 的 主要 作用 就 是 解释 超 文 本 文件 中 的 语 
言 , 将 单调 乏味 的 文字 显示 为 丰 曙 多彩 的 内 容 。 目 前 最 为 流行 的 浏览 锅 有 Microsoft Internet 
Explorer 以 及 Netscape Communicator。 

同 其 他 语言 (例如 C++) 编 详 产生 执行 文件 的 机 制 不 同 ， 利 用 HTML 编写 的 网 页 是 
解释 型 的 ， 也 束 是 说 网 页 的 效果 是 在 用 浏览 旨 打 开 网 页 时 动态 生成 的 ,而 不 是 事先 存储 于 
网 页 中 的 。 当 用 浏览 器 打开 网 页 时 ， 浏 览 器 读 取 网 页 中 的 HTML 代码， 分 析 其 语法 结构 ， 
然后 根据 解释 的 结果 显示 网 页 内 容 。 正 因为 如 此 , 网 页 显示 的 速度 同 网 页 代码 的 质量 有 很 
大 的 关系 ， 保 持 精简 和 高 效 的 HTML 源 代码 是 非常 重要 的 。 

超 文本 标记 语言 HTML) 的 开发 到 1999 年 的 HIML4 就 停止 了 。 万 维 网 联盟 (CW3C ) 
把 重点 转向 将 HTML 的 底层 语法 从 标准 通用 标记 语言 (SGML ) 改 为 可 扩展 标记 语言 

(XML)， 以 及 可 缩放 向 量 图 型 (SVG)、XForms 和 MathML 这 些 全 新 的 标记 语言 。 浏 览 
器 厂商 则 把 精力 放 到 选项 卡 和 富 站 点 摘要 (RSS) 阅读 器 这 类 浏览 器 特性 上 。Web 设计 人 
员 开 始 学 习 使 用 异步 JavaScript XML (Ajax)， 在 现 有 的 框架 下 通过 层 闭 样式 表 (CSS) 
和 JavaScriptrM 语言 建 并 自己 的 应 用 程序 。 但 HTML 本 身 没 有 任何 变化 。 已 经 存在 近 十 
年 的 HTML4 已 经 成 为 不 断 发 展 的 Web 开发 领域 的 租 领 。Web 开发 人 员 从 1999 年 就 一 
直 期 待 HTML 的 新 版 本 (通常 称 为 HTML5， 也 称 为 Web Applications 1.0)， 现 在 它 终 于 
发 布 了 。HTML 5 保持 了 HIML 4 原来 的 特色 ， 没 有 名 称 空间 或 模式 ， 元 系 不 必 结 束 ， 浏 
览 器 会 宽容 地 对 待 错 误 。 
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HTMLS 的 设计 原则 束 是 在 不 支持 它 的 浏览 右 中 能 够 平稳 地 退化 。 也 束 是 说 ， 老式 浏 
哆 器 不 认识 独 元 素 ， 则 完全 忽略 它们 ,但 是 页 面 仍然 会 显示 ， 内 容 仍 然 是 完整 的 。 浏 览 菠 
现在 有 选项 卡 、CSS 和 XmlHttpRequest， 但 是 它们 的 HTML 显示 引擎 仍然 停留 在 1999 
年 的 水 平 。HIML 5 考虑 到 了 这 一 点 。 为 了 实现 更 好 的 灵活 性 和 更 强 的 互动 性 ， 以 及 创造 
令 人 兴 否 而 更 具 交 互 性 的 网 站 和 应 用 程序 ，HTML5S 引入 和 增强 了 更 为 强大 的 特性 ， 包 括 
控制 、APIs、 多 媒体 、 结 构 和 语义 等 ， 使 建构 网 页 变 得 更 容易 。 

例如 ， 在 HTML4 的 页 面 中 ， 大 量 使 用 div 元 素 是 因为 缺少 必要 的 语义 元 素 以 更 具体 
地 摘 述 这 些 部 分 。 由 于 缺少 结构 ， 即 使 是 形式 展 好 的 HTML 页 面 也 比较 难以 处 理 ， 必 须 
分 析 标 题 的 级 别 ， 才 能 看 出 各 个 部 分 的 划分 方式 。 边 栏 、 页 脚 、 页 眉 、 导 航 条 、 主 内 容 区 
和 各 篇 文章 都 由 通用 的 div 元 素来 表示 。HTMLS 通过 引入 一 些 更 语义 化 的 结构 化 代码 标 
答 来 解决 这 个 问题 ， 而 这 些 元 系 表 示 各 个 不 同 的 部 分 。 元 系 header 表示 一 个 部 分 的 开头 ; 
元 素 footer 表示 所 在 章节 的 脚注 ; 元 素 aside 是 为 了 关联 周边 参考 内 容 , 一 般 用 作 侧 边栏 ; 
元 素 section 表示 文革 或 应 用 程序 的 通用 部 分 ， 如 一 个 章 广 ; 元 素 article 表示 文档 ， 页 面 
或 站 点 的 独立 部 分 。 通 过 确认 页 面 各 部 分 的 目的 ,使 用 特定 的 章节 元 素 和 辅助 技术 能 帮助 
用 户 更 容 多 地 浏览 网 页 , 如 可 以 很 容易 地 从 导 般 栏 跳 谈 或 快速 地 从 一 篇 文章 跳 到 下 一 篇 而 
不 需要 作者 提供 切换 链接 。 设计 者 也 从 中 受益 ， 由 于 采用 几 个 显明 的 元 素 代 瞧 了 文档 中 大 
量 的 div 元 素 ， 从 而 使 得 源 代 但 变 得 更 清晰 容易 。 

Adobe 在 Google IO 大 会 的 Keynote 上 演示 了 Adobe CS6 对 HTMLS 的 多 种 文 
持 , 并 且 Adobe Labs 放出 了 Dreamweaver CS6 的 HIMLS 扩展 包 。 通 过 它 Dreamweaver 
CS6 将 获得 以 下 新 特性 : 

* 多 屏 硕 了 预 蝶 和 面板 ， 适 用 于 同时 为 不 同 设备 开发 HTML 应 用 。 

* 支持 对 HTML5 新 增 的 标签 库 的 代码 提示 。 

* 支持 对 CSS 3 代码 提示 。 

* 增加 Video 和 Audio 标签 的 实时 预览 。 

* 改进 CSS 3 实时 预览 效果 。 

* 改进 设计 视图 下 对 HTMLS 新 增 标 签 的 泻 染 效果 。 

虽然 现在 已 经 普遍 使 用 了 HTML4 和 CSS2.1, Web 设计 师 可 以 使 用 HTML4 和 CSS2.1 
完成 一 些 很 酷 的 东西 。 但 相信 HTML5 和 CSS3 的 使 用 将 重组 代码 的 结构 ， 让 页 面 代码 更 
军 有 语义 化 特性 ， 让 网 页 设计 提升 到 一 个 新 总 度 ! 


2.1.2 统一 资源 定位 符 


要 深入 了 解 HIML， 还 需要 了 解 什 么 是 URL (Uniform Resource Locator， 统 一 资源 定 
位 符 )， 它 在 Internet 中 用 于 指定 信息 位 置 ， 可 以 看 作 是 Internet 上 文件 名 称 命名 规范 的 一 
种 扩展 。 换 句 话说 ， 它 是 Internet 上 的 地 址 。 在 进行 WWW 浏览 时 ， 通常 要 在 浏览 右 的 地 
址 栏 中 输入 地 址 ， 这 个 地 址 就 是 URL 的 一 种 形式 。 

URL 通常 以 “协议 :/ 文 件 路 径 / 文 件 名 称 ” 的 形式 出 现 ， 末 用 URL 可 以 描述 以 下 一 些 

令 ”文件 名 称 。 


令 ”文件 在 本 地 计算 机 上 的 位 置 ， 包 括 目 录 和 文件 名 等 。 
令 ”文件 在 网 络 计 算 机 上 的 位 置 ， 包 括 网 络 计 算 机 名 称 、 目 录 和 文件 名 等 。 
仿 ”访问 该 文 件 的 协议 。 


2 提示: 在 URL 中 的 路 径 采 用 UNIX 命名 规范 ， 表 示 目 录 的 斜 线 是 /， 与 基于 MS-D0S 
和 Windows 的 命名 规 苑 正好 相反 。 


根据 协议 的 不 同 ，URL 分 为 多 种 形式 ， 最 第 用 的 是 以 HITP 开头 的 网 络 地 址 形式 和 
以 FILE 开头 的 文件 地 址 形式 。 

采用 HTTP 开头 的 URL 通常 指 问 WWW 服务 右 ， 主 要 用 于 网 页 浏览 。 这 种 URL 通 
第 被 称 作 网 址 ， 它 是 Internet 上 应 用 最 广泛 的 URL 方式 ， 下 面 是 一 些 例子 : 


http://www.microsoft.com “指向 某 个 网 站 的 主页 ) 


http:// www.microsoft.com /china/document.htm (指向 某 个 网 站 的 指定 网 页 ) 
如 来 基于 HTTP 的 URL 末 站 没有 文档 的 文件 名 称 〈 如 上 面 的 第 一 个 例子 )， 则 使 用 浏 
哆 器 浏览 该 地 址 网 页 时 会 打开 默认 的 网 页 (通常 称 作 主页 )， 其 文件 名 多 为 index.htm、 
index.html、index.jsp、index.asp 或 index.aspx 等 。 
如 末 硕 望 指 同 一 个 FTP 站 点 或 本 地 计算 机 上 的 文件 ， 通 单 可 以 用 FILE 作为 URL 的 
前 级 ，FTP (File Transfer Protocol 一 文件 传输 协议 ) 主要 用 于 文件 传递 。 包 括 文件 的 上 载 
(从 本 地 计算 机 发 送 到 Internet 上 的 服务 器 ) 和 下 载 〈 从 Internet 上 的 服务 器 接 收 到 本 地 
的 计算 机 )。 目 前 Internet 上 很 多 软件 下 载 站 点 都 采用 这 种 FTP 的 方式 。 在 很 多 提供 主页 
免费 存放 空间 的 网 站 上 ， 都 要 求 用 户 通 过 FTP 程序 将 他 们 自己 编写 的 网 页 上 传 到 服务 器 
上 上 上。 下 面 是 一 些 例 子 : 
file://index.html 《指向 当前 目录 下 的 文件 ) 


file://C:/Winnt/System32/Blank.htm 〔( 指 向 某 个 绝对 路 径 下 的 文件 》 


file://ftp.netease.com/pub (指向 FTP 服务 器 的 目录 ) 


file://ftp.netease.com/pub/readme.txt( 指 向 FTP 服务 器 上 某 目录 下 的 某 文件 ) 
2. 1.3 ”HTML 的 语法 特性 


超 文本 标记 语言 的 构成 主要 是 通过 各 种 标记 〈Tag ) 来 表示 和 排列 各 种 对 象 的 。 通 常 
标记 由 符号 “<”“>” 以 及 其 中 所 包容 的 标记 元 素 组 成 。 例如 希望 在 浏览 器 中 显示 一 段 加 
粗 的 文本 ， 可 以 采用 标记 <b> 和 </b>: 

<b> 加 粗 的 文本 </b> 

在 用 浏览 器 显示 时 ， 标 记 <b> 和 </b> 不 会 被 显示 ， 浏 览 右 在 文档 中 友 现 了 这 对 标记 ， 
束 将 其 中 包容 的 文学 (这 里 是 “加 粗 的 文本 ”) 以 粗 体形 式 显 示 。 

一 般 来 说 ，HTML 的 语法 有 3 种 表达 形式 : 

令 “标记 > 对 象 </ 标 记 > 

令 < 标记 属性 1= 参 数 1 属性 2= 参 数 2 > 对象 </ 标 记 > 
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5 区 葡 如 小 实 创 玫 表 


令 < 标记 > 
标记 的 书写 是 与 大 小 写 无 关 的 。 严格 地 说 , 标记 和 标记 元 素 不 同 。 标记 元 素 是 位 于 “<” 


和 “>” 符 号 之 间 的 内 容 ， 而 标记 则 包括 了 标记 元 素 和 “<” 和 “>” 符 号 本 喘 。 但 是 ， 我 
们 通 弟 将 标记 元 素 和 标记 当 作 一 种 东西 ， 因 为 脐 离 了 “<” 和 “> ”符号 的 标记 元 素 坚 无 意 
义 。 在 本 书后 面 的 章节 里 ， 如 非 必要 ， 将 不 区 分 标记 和 标记 元 素 ， 而 统一 称 作 “标记 ”。 

下 面 分 别 对 以 上 3 种 表达 形式 及 标记 的 先 套 进行 介绍 。 

1. “标记 > 对 象 </ 标 记 > 

该 语法 示例 显示 了 使 用 封闭 类 型 标记 的 形式 。 大 多 数 标记 是 封闭 类 型 的 , 就 是 说 它们 
成 对 出 现 。 在 对 象 内 容 的 前 面 是 一 个 标记 ， 在 对 象 内 容 的 后 面 是 另 一 个 标记 ， 第 二 个 标记 
元 么 六 市 有 反 笠 线 ， 表 明 结 束 标记 对 对 象 的 控制 。 

下 和 面 是 一 些 示 例 : 

<h1> 这 是 标题 1 </h1> (浏览 器 以 标题 1 格式 显示 标记 间 的 文本 ) 


<ij> 这 段 文字 是 矢 体 文字 </i> 〔 浏 览 旧 以 冬 体 格式 显示 标记 间 的 文本 ) 


如 末 一 个 应 该 封 财 的 标记 没有 被 封闭 ， 则 会 产生 意料 不 到 的 错误 ， 随 浏 览 磺 不 同 ， 出 
昔 的 结果 可 能 也 不 同 。 例 如 ， 如 果 忘 记 以 </hl> 标 记 封 闭 对 文字 格式 的 设置 ， 可 能 后 面 所 
有 的 文字 都 会 以 标题 1 的 格式 出 现 。 

2. < 标记 属性 1= 参 数 1 属性 2= 参 数 2> 对 象 </ 标 记 > 

该 语法 示例 显示 了 使 用 封闭 类 型 标记 的 扩展 形式 。 利 用 属性 可 以 进一步 设置 对 象 某 方 
面 的 内 容 ， 而 参数 则 是 设置 的 结果 。 

例如 ， 在 如 下 的 语句 中 ， 设 置 了 标记 <a> 的 href 属性 。 

<a href=”http://www.adobe.com/”>Adobe 公司 主页 </a> 

<a> 和 </a> 是 销 标 记 ， 用 于 在 文档 中 创建 超级 链接 ，href 是 该 标记 的 属性 之 一 ， 用 于 
设置 超级 链接 所 指 同 的 地 址 ， 在 “=” 后 面 的 残 是 href 属性 的 参数 ， 在 这 里 是 Adobe 公司 
的 网 址 。“Adobe 公司 主页 ”等 文字 是 被 <a> 和 </a> 包 容 的 对 象 。 

一 个 标记 的 属性 可 能 不 止 一 个 ， 可 以 在 描述 完 一 个 属性 后 ， 输 入 一 个 空格 ,然后 继续 
描述 其 他 属性 。 

3. < 标记 > 

该 语法 示例 显示 了 使 用 非 封 闭 类 型 标记 的 形式 。 在 HTML 语言 中 非 封 财 类 型 很 少 ， 
但 的 确 存 在 ， 最 党 用 的 是 换行 标记 <br>。 

例如 硕 望 使 一 行文 学 中间 换 行 〈《 但 是 仍然 与 上 面 的 文字 属于 一 个 段 洲 )， 则 可 以 在 文 
字 要 换行 的 地 方 添加 标记 <br> ， 例 如 

这 是 一 段 完整 的 段落 <br> 中 间 被 换行 处 理 

在 浏 闹 右上 会 显示 为 两 行 ， 但 它们 仍然 同属 于 一 段 。 

4. 标记 骸 套 

几乎 所 有 的 HTML 代码 都 是 上 和 面 三 种 形式 的 组 合 ， 标 记 之 间 可 以 相互 租 套 ， 形 成 更 
为 复杂 的 语法 。 例 如 硕 望 将 一 行文 本 同时 设置 粗 体 和 笠 体 格式 ， 则 可 以 采用 下 面 的 语句 : 


<b><i> 这 是 一 段 既 是 粗 体 义 是 和 斜体 的 文本 </i></b> 
在 花 套 标记 时 需要 注意 标记 的 众人 套 顺 序 ， 如 果 标 记 的 众人 套 顺 序 发 生 混 乱 ， 则 可 能 会 出 
现 不 可 预料 的 结果 。 例 如 对 于 上 面 的 例子 也 可 以 这 样 写 : 
<i><b> 这 是 一 段 既 是 粗 体 又 是 斜体 的 文本 </b></i> 
但 是 尽量 不 要 写成 如 下 的 形式 : 
<b><i> 这 是 一 段 既 是 粗 体 义 是 和 斜体 的 文本 </b></i> 
上 上面 的 语句 中 ， 标 记 般 套 发 生 了 错误 。 羊 运 的 是 大 多 数 浏览 右 对 这 个 例子 可 以 正确 理 
解 。 但 是 对 于 其 他 的 一 些 标 记 ， 如 果 髋 套 发 生 错 误 的 话 ， 束 不 一 定 有 这 么 好 的 运气 了 。 为 
了 保证 文档 有 更 好 的 兼容 性 ， 尽 量 避 免 标 记 瞬 套 顺 序 的 错误 。 


2.2 ” 单 用 HTML 标记 


在 Dreamweaver CS6 中 创建 了 一 个 新 文档 后 ,如 条 这 时 候 打 开 HTML 源 代 人 码 检 视 器 ， 
您 会 友 现 尽管 新 建文 档 的 设计 视图 是 空白 的 ， 但 是 其 中 已 经 有 了 不 少 源 代 码 , 在 款 认 状态 
下 ， 这 些 源 代码 如 下 (<! 主要 内 容 将 放 在 这 里 >” 是 笔者 加 上 的 ): 
<IDOCTYPE html PUBLIC "-/W3C/DTD XHIML 1.0 Transitional/EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


<html xmIns="http://www.w3.o0rg/1999/xhtmI"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 无 标题 文档 </title> 

</head> 

<body> 

<! 主 要 内 容 将 放 在 这 里 > 


</body> 
</html> 
学 习 HTML 语言 ， 从 上 述 代 人 码 开始 是 最 好 的 起 步 。 需 要 先行 说 明 的 是 ， 本 市 中 所 述 
的 显示 效果 是 指 保 存 为 HTML 文件 后 在 浏览 句 或 在 Dreamweaver CS6 设计 视图 中 浏览 的 


效 末 。 
如 果 利 用 Dreamweaver CS6 的 HIMLS 扩展 包 做 网 页 , 首先 要 声明 并 创建 文档 类 型 ， 
可 以 这 样 写 : 


<IDOCTYPE html> 
简单 而 明显 ， 不 区 分 大 小 写 。 它 可 以 更 容易 向 后 兼容 。 


2.2.1 文档 的 结构 标记 


1. <html> 标 记 
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<html>.….</html> 标 记 是 HTML 文档 的 开始 和 结束 标记 ，HTML 文档 中 所 有 的 内 容 都 
应 该 在 这 两 个 标记 之 间 。 一 个 HTML 文档 非 注 释 代 人 码 总 是 以 <html> 开 始 以 </html> 结 束 。 

2. <head> 标 记 

<head>...</head> 标 记 一 和 股 位 于 文档 的 头 部 ， 用 于 包 盒 当前 文档 的 有 关 信 息 ， 例 如 标 
题 和 关键 字 等 。 通 各 将 这 两 个 标记 之 间 的 内 容 统称 作 HTML 的 “ 头 部 ” 位 于 头 部 的 内 容 

般 不 会 在 网 页 上 下 接 显 示 ， 而 是 通过 另外 的 方式 起 作用 。 例 如 ， 标 题 是 在 HTML 的 头 

部 定义 的 ， 它 不 会 显示 在 网 页 上 ， 但 是 会 出 现在 网 页 的 标题 栏 上 。 

3. <tite> 标 记 

<title>...</title> 标 记 用 于 设置 HTML 文档 标题 。 在 浏览 网 页 时 ,标题 文学 出 现在 浏 虹 
器 的 标题 栏 上 。xtitte> 和 </title> 标 记 位 于 HTML 文档 的 头 部 ， 即 位 于 <head> 和 </head> 标 
We 

4. <body> 标 记 

<body>...</body> 用 于 定义 HTML 文档 的 正文 部 分 ， 通 常 在 </head> 标 记 之 后 ， 而 在 
</htmB> 标 记 之 前 。 所 有 出 现在 网 页 上 的 正文 内 容 痢 应 该 写 在 这 两 个 标记 之 间 。 

<body> 标 记 有 6 个 第 用 的 可 选 属性 ， 主 要 用 于 控制 文档 的 基本 特征 ， 如 背景 两 色 等 。 
各 个 属性 介绍 如 下 : 
background: 访 属 性 用 于 为 文档 指定 一 幅 图 像 作为 表 景 。 
text: 该 属性 用 于 定义 文档 中 文本 的 默认 颜色 ， 也 即 文 本 的 前 景色 。 
link: 该 属性 用 于 定义 文档 中 一 个 未 被 访问 过 的 超级 链接 的 文本 颜色 。 
alink: 该 属性 用 于 定义 文档 中 一 个 正在 打开 的 超级 链接 的 文本 凑 色 。 其 中 color 
是 颜色 的 数值 。 

令 ”vlink: 该 属性 用 于 定义 文档 中 一 个 已 经 被 访问 过 的 超级 链接 的 文本 颜色 。 

争 “bgcolor: 该 属性 定义 文档 的 背景 闫 色 。 

例如 , 希望 将 文档 的 背景 频 色 设置 为 绿色， 文本 磊 色 设置 为 黑色 ， 未 访问 超级 链接 的 
文本 凑 色 设置 为 日 色 ， 已 访问 超级 链接 的 文本 颜色 设置 为 黄色 ,正在 访问 的 超级 链接 的 文 
本 颜色 设置 为 紧 红 色 ， 则 可 以 使 用 如 下 的 <body> 标 记 : 

<body bgcolor = “green text = “black link = “white alink = Ted vlink = yellow > 

由 于 缺少 结构 ， 即 使 是 形式 良好 的 HTML4 页 面 也 比较 难以 处 理 。 必 须 分 析 标 题 的 
级 别 ， 才 能 看 出 各 个 部 分 的 划分 方式 。 边 栏 、 页 脚 、 页 眉 、 导 航 条 、 主 内 容 区 和 各 篇 文章 
都 由 通用 的 div 元 素来 表示 。HIMLS 添加 了 一 些 新 元 聚 专门 用 来 标识 香 见 的 结构 : 

急 section: 可 以 是 书 中 的 一 章 或 一 个， 实际 上 是 在 HTML 4 中 有 目 己 标题 的 任何 
东西 。 
header: 页 面 上 显示 的 页 眉 ， 与 head 元 素 不 一 样 。 
footer: 页 脚 ， 可 以 显示 电子 邮件 中 的 签名 。 
nav: 导航 标签 ， 指 同 其 他 页 面 的 一 组 链接 。 
article: blog、 杂 志 、 文 章 沪 编 等 中 的 一 篇 文章。 
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2.2.2 注释 标记 


<!--...--> 标 记 是 注释 标记 ， 在 这 个 标记 内 的 文本 部 不 会 在 浏览 器 窗 口中 显示 出 来 。 但 
如 来 是 程序 代码 ， 即 使 在 注释 标记 内 也 会 被 执 行 
一 般 将 客户 端的 脚本 程序 段 放 在 此 标记 中 。 这 样 ， 对 于 不 文 持 该 脚本 语言 的 浏览 右 也 
可 隐 苦 程序 代码 。 使 用 示例 : 
<!-- 今 天 天 气 真 好 ! --> 


2.2.3 文本 格式 标记 


1. <b> 标 记 
<b>...</b> 标 记 将 标记 之 间 的 文本 设置 成 粗 体 。 使 用 示例 : 
今天 <b> 天 气 </b> 真 好 ! 
显示 效果 : 
今天 天 气 真 好 | 
2. <big> 标 记 
<big>...</big> 标 记 将 使 用 比 当前 页 面 使 用 的 字体 更 大 的 字体 显示 标记 之 间 的 文本 。 使 
用 示例 : 


<font size=2> 今 天 <big> 天 和 气 </big> 真 好 ! </font> 


显示 效果 : 
“> 人 
3. <em> 标 记 


站 


会 设 


<em>..</em> 标 记 用 于 强调 标记 之 间 的 文学 。 不 同 的 浏览 右 效 末 有 所 不 同 ， 
置 成 矢 体 。 使 用 示例 : 
<em> 今 天 天气 真 好 ! </em> 
显示 效 末 : 
今天 天 人 气 豆 寻 / 
4. <font> 标 记 
<font > … </font> 标 记 用 于 设置 文本 字体 格式 ， 有 3 个 可 选 属性 分 别 介 绍 如 下 : 
令 ”face: 用 于 议 置 文本 字体 名 称 ， 可 以 用 喜 号 隔 开 的 多 个 字体 名 称 。 
令 Size: 用 于 设置 文本 字体 大 小 ， 取 值 范 围 在 一 7 一 7 之 间 ， 数 字 越 大 字体 越 大 。 
急 ”Color: 用 于 设置 文本 凑 色 ， 可 以 用 red、white 和 green 等 助 记 符 ， 也 可 以 用 16 
进 制 数 表 示 ， 如 红色 为 “#F0000”。 使 用 示例 : 
<font face= "隶书 " size= "5 " color= "black"> 隶 书 5 号 字体 、 黑 色 </font> 


显示 效果 ; 
隶书 0 号 字体 、 黑 色 


5. <h#3 标 记 
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(CSB 站 交 商 本 淮 灾 创 求 在 


<h#> ... </h#> (#=1, 2, 3, 4, 5, 6) 标记 用 于 设 标题 字体 (Header)， 有 1 到 6 级 标题 ， 


数 子 越 大 字体 越 小 。 标 题 将 显示 为 黑体 了 守 。<h#>---</h#> 标 记 目 动 插 入 一 个 空 行 ， 不 必用 
<p> 标 记 再 加 空 行 。 与 <title> 标 记 不 一 样 ，<h#> 标 记 里 的 文本 显示 在 浏览 器 中 。 使 用 示例 : 


20 


<h1> 这 是 一 级 标题 </h1> 
<h2> 这 是 二 级 标题 </h2> 
<h3> 这 是 三 级 标题 </h3> 
<h4> 这 是 四 级 标题 </h4> 
<h5> 这 是 五 级 标题 </h5> 
<h6> 这 是 六 级 标题 </h6> 
显示 效果 如 图 2-1 所 示 。 


这 和 古 一 级 标题 
这 是 二 级 标题 
这 是 三 级 标题 


这 是 四 级 标题 
这 是 五 级 标题 
这 是 六 级 标题 


图 2-1 显示 效果 
6. <i> 标 记 
<i>...</ 谊 标记 将 标记 之 间 的 文本 设置 成 儿 体 。 使 用 示例 : 
<i> 今 天 天 人 气 真 好 ! </i> 


显示 效果 ; 
分 天 天 气 真 好 1 


7. <sS> 标 记 
<S>...</s$> 标 记 为 标记 之 间 的 文本 加 删除 线 〈 即 在 文本 中 间 加 一 条 横 线 )。 使 用 示例 : 
<S> 今 天 天 气 真 好 ! </s> 


显示 歼 果 : 
2 真 好 ! 


8. xsmall> 标 记 
<Ssmall>...</small> 标 记 将 使 用 比 当 前 页 面 使 用 的 字体 更 小 的 字体 显示 标记 之 间 的 文 


。 使 用 示例 : 


今天 < small > 天 气 </ small > 真 好 ! 


显示 效 打 : 
人 人 


9. <u> 标 记 
<u>...</u> 标 记 为 标记 之 间 的 文本 加 下 划 线 。 使 用 示例 : 


<U> 今 天 天 气 真 好 ! </U> 
显示 效果 : 
今天 天 RE 


2. 2.4 排版 标记 


1. <br> 标 记 
<br> 标 记 用 于 添加 一 个 换行 符 ， 它 不 需 成 对 使 用 。 使 用 示例 : 


2 天 <bhs 天 气 贡 好 ! 
显示 效果 : 

今天 

大气 具 灶 :| 


2. <hr> 标 记 
<hr> 标 记 用 于 在 页 面 添 加 一 条 水 平 线 。 使 用 示例 : 


今天 <hr> 天 气 真 好 ! 
显示 效 林 : 

今天 

天 气 真 好 ! 


3. <center> 标 记 
<center>...</center> 标 记 将 标记 之 间 的 文本 等 元 素 居 中 显示 。 使 用 示例 : 


<Center> 今 天 天 气 真 好 ! </center> 


显示 效果 : 


今天 天 气 真 好 ! 
4. <left> 标 记 
<left>...</left> 标 记 将 标记 之 间 的 文本 每 元 素 居 左 显 示 。 使 用 示例 : 
<left> 今 天 天 气 真 好 ! </left> 
显示 效果 : 
今天 天 气 真 好 ! 
5. <p> 标 记 


<p>..…</p> 标 记 用 来 分 隔 文档 的 多 个 段落 。 可 选 属性 “align” 有 3 个 取 值 : 


@@ ” ”left 段 洛 左 对 齐 。 
急 。 center: 段 洛 后 中 对 章 。 
急 Light: 段 洛 右 对 章 。 
使 用 示例 : 
< p align=center> 今 天 天 气 真 好 ! </ p> 


显示 效果 : 


今天 天 和气 真 好 ! 
6. <xright> 标 记 
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COGB 守 交纳 保 准 实 他 及 来 


<right>...</right> 标 记 将 标记 之 间 的 文本 等 元 素 居 石 显示 。 


使 用 示例 : 
< right > 今天 天 气 真 好 ! </ right > 
显示 效 林 : 


7. <sub> 标 记 
<sub>...</sub> 标 记 将 标记 之 间 的 文本 设置 成 下 标 。 使 用 示例 : 
今天 <sub> 天 气 </sub> 真 好 ! 


显示 效果 : 
今天 恰好 1 


8. <sup> 标 记 
<Sup>...</sup> 标 记 将 标记 之 间 的 文本 设置 成 上 标 。 使 用 示例 : 
今天 <Sup> 天 气 </sup> 真 好 ! 


显示 效果 : 
今天 ^ ' 真 好 ! 


2.2.5 列表 标记 


1. <ul> 和 <li> 标 记 


<ul>.…</ul> 用 来 标记 无 序列 表 的 开始 和 结束 ;xli>.…</i> 用 来 标记 有 序 或 无 序列 表 的 


列表 项 目的 开始 和 结束 。 使 用 示例 : 


<ul> 


<]i> 今 天 天 气 真 好 ! </li> 
<]i> 今 天 天 气 真 好 ! </li> 
<]i> 今 天 天 气 真 好 ! </li> 


</ul> 

显示 效果 : 
@ ”今天 天 气 真 好 
@ 今天 天 气 真 好 ! 
@ ”今天 天 气 真 好 ! 


2. <ol> 和 <li> 标 记 


<ol>.…</ol> 用 来 标记 有 序列 表 的 开始 和 结束 ;xli>.…</i> 用 来 标记 有 序 或 无 序列 表 的 


列表 项 目的 开始 和 结束 。 有 序列 表 有 一 个 参数 “type”， 其 值 的 功能 介绍 如 下 : 
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type=1: 表示 用 数字 给 列表 项 编写， 这 是 默认 设置 。 
type=a: 表示 用 小 写字 母 给 列表 项 编号 。 

type=A: 表示 用 大 写字 母 给 列表 项 编号 。 

type=i: 表示 用 小 写 多 马 字 母 给 列表 项 编号 。 
type=I: 表示 用 大 与 多 马 字 母 给 列表 项 编号 。 


全 多 


使 用 示例 : 
<ol> 
<1i> 今 天 天 气 真 好 ! </li> 
<]i> 今 天 天 气 真 好 ! </li> 
<]i> 今 天 天 气 真 好 ! </li> 


</ol> 

显示 效果 : 
1. 今天 天 气 真 好 ! 
人 
3 大 大 


2. 2.6 表格 标记 


1. <table> 标 记 
<table>...</table> 用 于 标志 表格 的 开始 和 结束 。 表 格 的 沼 用 参数 分 别 介 绍 如 下 : 

align: 设置 表格 与 负面 对 齐 方式 ， 取 值 有 left、center 和 right。 

background: 设置 表格 的 背景 图 像 。 

bgcolor: 设置 表格 的 背景 闫 色 。 

border: 设置 表格 的 边框 。 

width: 设置 表格 的 冤 度 ， 蛙 位 畴 认为 像 系 ， 也 可 以 使 用 百分比 形式 。 

height: 设置 表格 的 高 度 ， 单 位 默认 为 像 亲 ， 也 可 以 使 用 百分比 形式 。 
cellpadding: 设置 表格 一 个 单元 格 内 数据 和 单元 格 边 框 则 的 边 距 , 以 像 系 为 单位 。 
cellspacing: 设置 单元 格 之 间 的 间距 ， 以 像 系 为 单位 。 

2. <tr> 标 记 

<tr>...</tr> 标 记 用 于 标志 表格 一 行 的 开始 和 结束 。<tr> 的 常用 参数 分 别 介 绍 如 下 : 

令 align: 设置 行 中 文本 在 单元 格 内 的 对 齐 方式 ， 取 值 有 left、center 和 right。 

令 ”background: 设置 行 中 单元 格 的 背景 网 像 。 

令 “bgcolor: 设置 行 中 单元 格 的 背景 颜色 。 

3. <th> 标 记 

<th>...</th> 用 于 标志 表格 内 表 头 的 开始 和 结束 。<th> 的 利用 参数 分 别 介 绍 如 下 : 

令 align: 设置 在 单元 格 内 各 种 内 容 的 对 齐 方式 ， 取 值 有 left、center 和 right。 
急 ”background: 设置 单元 格 的 背景 图 像 。 
令 “bgcolor: 设置 单元 格 的 背景 闫 色 。 

令 ”width: 设置 单元 格 的 宽度 ， 单 位 为 像素 。 
令 

令 

令 

4. 
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height: 设置 单元 格 的 高 度 ， 单 位 为 像素 。 

colspan: 设置 <th>...</th> 内 的 内 容 应 该 跨越 几 列 。 

rowspan: 设置 <th>...</th> 内 的 内 容 应 该 跨越 几 行 。 
<td> 标 记 
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| re Be 人 
<td>...</td> 用 于 标志 表格 内 单元 格 的 开始 和 结束 。<td> 标 记 应 位 于 <tr> 标 记 内 部 。<td> 


的 第 用 参数 分 别 介 绍 如 下 : 


align: 设置 行内 容 在 单元 格 内 的 对 齐 方式 ， 取 从 有 left、center 和 right。 
background: 设置 单元 格 的 背景 图 像 。 

bgcolor: 设置 单元 格 的 背景 闫 色 。 

width: 设置 单元 格 的 宽度 ， 单 位 为 像素 。 

height: 设置 单元 格 的 高 度 ， 单 位 为 像素 。 

表格 使 用 示例 : 


<table border=1> 
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<tr><th>Food</th><th>Drink</th><th>Sweet</th> 


<tr><td>A</td><td>B</td><td>C</td> 


</table> 

显示 效果 : 
Food Drink Sweet 
A B C 


2. 2.7 框架 标记 


下 : 


1. <frameset> 标 记 
<frameset>...</frameset> 标 记 用 于 标志 页 面 中 水 平和 垂直 框架 的 数目 ， 其 参数 介绍 如 


rows: 用 于 设置 行 的 大 小 ， 行 的 大 小 为 浏览 显示 器 的 百分比 。 
cols: 用 于 设置 列 的 大 小 ， 列 的 大 小 为 浏 喉 显示 器 的 百分比 。 
frameborder: 用 于 设置 框架 是 否 有 边框 ， 取 值 为 yes 或 no。 
border: 用 于 设置 框架 边框 的 厚度 。 
2. <frame> 标 记 

<frame> .</frame> 标 记 代 表 一 个 框架 ， 


29@ 


必须 在 frameset 标记 内 使 用 。 其 参数 介绍 如 


令 ”name: 用 于 设置 框架 名 称 。 

例 ”scrolling: 用 于 设置 框 染 是 否 有 深 动 条 ， 取 值 为 yes 有 深 动 条 ， 取 值 为 no 则 没有 
深 动 条 ， 取 值 为 auto 则 根据 需要 目 动 设置 ， 默 认 值 是 auto。 

争 ”src: 用 于 指定 该 框架 的 HTML 等 页 面 文件 ， 大 不 设 此 参数 则 框架 内 没有 内 容 。 

3. <noframe> 标 记 

<noframe>...<mnoframe> 标 记 用 于 设置 当 浏览 句 不 文 持 框架 技术 时 显示 的 文本 。 通 各 


的 做 法 十 在 此 标记 之 间 放 管 提 示 用 户 浏 览 占 不 文 持 框架 的 信息 。 框 染 使 用 示例 : 
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<frameset rows=30%,"> 
<frame src="Acol.html" frameborder=1> 


<frameset cols=30%,*> 


<frame src="Bcol.html" frameborder=0> 
<frame src="Ccol.html" frameborder=0> 
<noframe> 对 不 起 ， 您 的 浏览 器 不 支持 框架 。</noframe> 


</frameset> 


</frameset> 


显 不 效 玉 如 图 2-2 所 示 。 


LL nie i 


图 2-2 显示 效果 


2. 2.8 表单 标记 


1. <form> 标 记 

<form>...</form> 标 记 用 于 表示 一 个 表单 的 开始 与 线束， 并且 通 知 服务 器 处 理 表单 的 
内 容 。 其 功能 如 下 : 

令 ”name: 用 于 指定 表单 的 名 称 。 

令 action: 用 于 指定 提交 表单 后 ， 将 对 表单 进行 外 理 的 文件 路 径 及 名 称 〈 即 URL) 。 

令 ”method: 用 于 指定 发 送 表单 信息 的 方式 , 有 GET 方式 (通过 URL 发 送 表 单 信息 ) 

和 POST 方式 (通过 HTTP 发 送 表单 信息 ) 。 

2. <input> 标 记 

<input> 标 记 用 于 在 表单 内 放置 表单 对 象 。 此 标记 不 需 成 对 使 用 。 它 有 type 等 参数 ， 
对 于 不 同 的 type 参数 有 不 同 的 属性 。 当 type=text (文本 域 表 单 对 象 ， 在 文本 框 中 显示 文 
学 ) 或 type=password〈 密 但 域 表 单 对 象 ， 在 文本 框 中 显示 # 号 代 符 输入 的 文学 ， 起 保密 作 
用 ) 时 xinput> 标 记 参 数 介 绍 如 下 : 

令 ”name: 用 于 指定 表单 文本 /密码 域 对 象 的 名 称 。 

倒 Size: 文本 框 在 浏览 器 的 显示 和 宽度， 实际 能 输入 的 字符 数 由 maxlength 参数 决定 。 

令 ”maxlength: 在 文本 框 最 多 能 输入 的 字符 数 。 

当 type=submit〔 提 交 按 钮 ， 用 于 提交 表单 ) 或 type=reset〈 重 置 按钮 ， 用 于 清空 表单 
中 用 户 已 输入 的 内 容 ) 时 <input> 标 记 参 数 介 绍 如 下 : 
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令 name: 用 于 指定 表单 按钮 对 象 的 名 称 。 


令 ”value: 在 按钮 上 显示 的 标签 。 
当 type=radio 〈 单 选 按 钮 ) 或 type=checkbox 〈 复 选 按钮 ) 时 xinput> 标 记 参 数 介绍 如 


name: 用 于 指定 表单 单 选 按钮 或 复 选 按钮 对 象 的 名 称 。 

value: 用 于 设 定单 选 按钮 或 复 选 按钮 的 值 。 

checked: 可 选 参数 , 奉 珊 有 该 参数 , 则 默认 状态 下 该 按钮 是 选中 的 。 同一 组 radio 
单 选 按钮 (name 属性 相同 ) 中 最 多 只 能 有 一 个 单 选 按钮 带 checked 属性 。 复 选 
按钮 则 无 此 限制 。 

当 type=image (图 像 ) 时 xinput> 标 记 参 数 介绍 如 下 : 

令 name: 图 像 对 和 象 有 的 名 称 。 

src: 图 像 文件 的 名 称 。 

width: 图 像 宽度 。 

height: 图 像 高 度 。 

alt: 图 像 无 法 显示 时 的 替代 文本 。 

align: 网 像 对 象 的 对 章 方式 ， 取 值 可 以 是 top、left、bottom、middle 和 right。 
使 用 示例 : 


<form action=login_action.jsp method=POST> 


SO 
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姓名 : <input type=text name= 姓 名 size=16><br> 
密码 : <input type=password name= 密 人 码 size=16><br> 
性 别 : <input name="radiobutton" type="radio" value="radiobutton"> 男 
<input name="radiobutton" type="radio" value="radiobutton"> 女 <br> 
爱好 : <input type="checkbox" name="checkbox" value="checkbox"> 运 动 
<input type="checkbox" name="checkbox2" value="checkbox"> 首 乐 <br> 
图 像 : <input name="imageField" type="image" src="dd.gif" width="16" height="16" 
border="0"><br> 
<input type=submit value=" 发 送 "><input type=reset value=" 重 设 "> 
</form> 
显 不 效 来 如 图 2-3 所 示 。 
3. xselect> 和 <option> 标 记 
<select>...</select> 标 记 用 于 在 表单 中 插入 一 个 列表 框 对 象 。 它 和 <option></option> 标 


记 一 起 使 用 ，<option> 标 记 为 列表 框 添加 列表 项 。<select> 标 记 的 功能 如 下 : 


令 ”name: 指定 列表 框 的 名 称 。 
急 Size: 指定 列表 框 中 显示 多 少 列 表 项 〈 行 ) ， 如 果 列 表 项 数目 大 于 size 参数 值 ， 
那么 通过 深 动 条 来 深 动 显示 。 
令 ”multiple: 指定 列表 框 是 否 可 以 选中 多 项 ， 默 认 下 只 能 选择 一 项 。 
<option> 标 记 的 参数 有 两 个 可 选 参数 ， 介 绍 如 下 : 
争 selected: 用 于 议定 在 初始 时 本 列表 项 是 被 默认 选中 的 。 


令 value: 用 于 设 定 本 列表 项 的 值 ， 如 采 不 设 此 项 ， 则 默认 为 标签 后 的 内 容 。 使 用 
示例 : 
<form action=none.jsp method=POST> 
<select name=fruits size=3 multiple> 
<option selected> 足 球 
<option selected> 蓝 球 
<option value=My_Favorite> 乒 乓 球 
<option> 羽 毛 球 
</Select><p> 


<input type=submit><input type=reset> 


</form> 
显示 效果 如 图 2-4 所 示 。 
姓名 :| | 
密码 :[ | 
性 别 ， 男 白 女 


爱好 ， 口 运动 口音 乐 


om 四 
aa 国 | Submit |[Reset |] 


图 2-3 示例 效果 图 2-4 ”示例 效果 

4. <textarea> 标 记 

<textarea>...</textarea> 作 用 与 <sinput> 标 记 在 type=text 时 的 作用 相似 ， 不 同 之 处 在 于 
<textarea> 显示 的 是 多 行 多 列 的 文本 区 域 ， 而 <input> 文 本 框 只 有 一 行 。<textarea> 和 
</textarea> 之 间 的 文本 是 文本 区 域 的 初始 文本 。<textarea> 标 记 的 参数 有 : 

令 ”name: 指定 文本 区 域 的 名 称 。 

倒 ”rows: 文本 区 域 的 行 数 。 

急 cols: 文本 区 域 的 列 数 。 

令 ”wrap: 用 于 设置 是 否 自动 换行 ， 取 值 有 off (不 换行 ， 是 默认 设置 ) 、soft( 软 换 

行 ) 和 hard《〈 便 换行 ) 。 使 用 示例 : 


<form action=/none.jsp method=POST> 


<textarea name=comment rows=5 cols=20> 


今天 天 气 真 好 
</textarea> 
<br> 
<input type=submit><input type=reset> 今天 天 气 真 好 
</form> 
显示 效果 如 2-9 所 示 。 [| ES 


图 2-5 示例 效果 


主 并 SSD 由 TAILH 骨 Z 仆 


Z0 JS}YQBUYD 


5 区 陷 如 小 实 创 玫 表 


2. 2.9 其 他 标记 


1. <pre> 标 记 
<pre>...</pre> 标 记 用 于 设 定 浏览 器 在 输出 时 ， 对 标记 内 部 的 内 容 儿 乎 不 作 修改 地 输 


出 。 使 用 示例 : 


<pre> 
今天 ”天 气 真 好 
</pre> 
天 洋气 入 好 
显示 效果 : 


今天 大 所 具体 
今天 天 和 气 真 好 
2. <a> 标 记 
<a>...</a> 标 记 用 于 建立 超级 链接 或 标识 一 个 目标 。<a> 标 记 有 两 个 不 能 同时 使 用 的 参 


数 href 和 name， 此 外 还 有 参数 target 等 ， 分 别 介 绍 如 下 : 
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令 href: 用 于 指定 目标 文件 的 URL 地 址 或 页 内 锚 点 。<a> 标 记 使 用 此 参数 后 ， 在 浏 
览 器 单 击 标记 间 的 文本 ， 页 面 将 跳 转 到 指定 的 页 面 或 本 页 内 指定 的 销 点 位 置 。 

令 ”name: 用 于 标识 一 个 目标 〈 即 销 点 ， 用 于 页 内 链接 ) 。 

急 target: 用 于 设 定 打开 新 页 面 押 在 的 目标 窗口 。 取 值 有 _self《〈 将 链接 的 文件 载 入 
一 个 未 命名 的 新 浏览 器 窗口 中 ) ，_parent (将 链接 的 文件 载 入 含有 该 链 接 的 框架 
的 父 框 架 集 或 父 窗 口中 ) ，_blank 将 链接 的 文件 载 入 该 链 接 所 在 的 同一 框架 或 
口中 ) ，top (在 整个 浏览 器 窗口 中 载 入 所 链接 的 文件 , 因而 会 删除 所 有 框架 ) 。 
各 本 页 使 用 框架 技术 还 可 以 把 target 设置 为 框架 名 。 使 用 示例 : 


<a href="url|"> 链 接 字 符 串 </a><br> 


<aname="name'">text</a> 
显示 效 来 : 

链接 衬 符 串 

text 
3. ximg>》 标 记 
<img> 标 记 用 于 在 页 面 插入 图 像 ， 其 主要 功能 如 下 : 
争 Src: 用 于 指定 要 插入 图 像 的 地 址 。 
令 alt 用 于 设置 当 图 像 无 法 显示 时 的 奉 换 文本 。 
人 align: 用 于 设置 图 像 和 页 面 其 他 对 象 的 对 齐 方式 ， 取 值 可 以 是 top，middle 和 
bottom 。 
width: 用 于 设置 图 像 的 宽度 ， 以 像素 为 单位 。 
height: 用 于 设置 图 像 的 高度 ， 以 像素 为 单位 。 
border: 用 于 议 置 图 像 的 边框 厚度 ， 以 像素 为 单位 。 
vspace: 用 于 设置 图 像 的 垂直 边 距 ， 以 像素 为 单位 。 
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令 ”hspace: 用 于 设置 图 像 的 水 平 边 距 ， 以 像素 为 单位 。 
使 用 示例 : 

<img src="new.gif” width="35" height="40"> 

<img src="new.gif” width="35" height="40" border="1"> 
显示 效果 如 图 2-6 所 示 。 


图 2-6 示例 效果 

4. <meta> 标 记 

<meta> 标 记 是 实现 元 数据 的 主要 标记 ， 乞 能 够 提供 文档 的 关键 字 、 作 者 、 摘 述 等 多 种 
信息 ， 在 HTML 的 头 部 可 以 包括 任意 数量 的 smeta> 标 记 。<meta> 标 记 是 非 成 对 使 用 的 标 
记 ， 它 的 功能 如 下 : 

令 ” name: 用 于 定义 一 个 元 数据 属性 的 名 称 。 

急 ”content: 用 于 定义 元 数据 的 属性 值 。 

令 ”scheme: 用 于 解释 元 数据 属性 值 的 机 制 。 

令 http-equiv: 可 以 用 于 符 代 name 属性 ，HTTP 服务 右 可 以 使 用 该 属性 来 从 HTTP 
吧 应 头 部 收集 信息 。 
令 ”charset: 用 于 定义 文档 的 字符 解码 方式 。 使 用 示例 : 


<meta name = "keywords" content = "Webmaster 制作 "> 


<meta name = "description" content = "webmaster 制作 "> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
5. <base> 标 记 
<base> 标 记 定 义 了 文档 的 基础 URL 地 址 , 在 文档 中 所 有 相对 地 址 形式 的 URL 都 是 相 
对 于 这 里 定义 的 URL 而 言 的 。 一 篇 文档 中 的 <base> 标 记 不 能 多 于 一 个 ， 必 须 放 于 头 部 ， 
而 且 应 该 在 任何 包含 URL 地 址 的 语句 之 前 。<base> 标 记 的 功能 如 下 : 
令 href: 指定 了 文档 的 基础 URL 地 址 。 该 属性 在 <base> 标 记 中 是 必须 存在 的 。 
令 target: target 属性 同 框 架 一 起 使 用 ， 它 定义 了 当 文 档 中 的 链接 被 点 击 后 ， 在 哪 一 
个 框架 集中 展开 页 面 。 如 果 文 档 中 超级 链接 没有 明确 指定 展开 页 面 的 目标 框 染 
集 ， 则 使 用 这 里 定义 的 地 址 代替 。 使 用 示例 : 
<base href = "http:/www.microsoft.com "> 
6. <link> 标 记 
<link> 标 记 定 义 了 文档 之 间 的 包含 ,在 HTML 的 头 部 可 以 包含 任意 数量 的 <link> 标 记 。 
<link> 标 记 市 有 很 多 参数 ， 下 面 介 绍 的 是 一 些 第 用 的 参数 : 
令 href: 用 于 设置 链接 资源 所 在 的 URL。 
令 title: 用 于 描述 链接 关系 的 字符 串 。 
急 rel: 用 于 定义 文档 和 所 链接 资源 的 链接 关系 , 可 能 的 取 值 有 Alternate, Stylesheet， 
Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, 
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Subsection，Appendix，Help， 和 Bookmark 等 。 如 果 和 希望 指定 不 止 一 个 链接 关系 ， 
可 以 在 这 些 值 之 间 用 空格 隔 开 。 
争 ITIev: 用 于 定义 文档 和 所 链接 资源 之 则 的 反 同 关系 ,其 可 能 的 取 值 同 rel 属性 相同 。 
使 用 示例 : 


<link rel="stylesheet" type="text/css" href="./base.css"> 


2.3 CSS 基础 


CSS 是 Cascading Style Sheets 〈 层 登 样式 表单 ) 的 简称 。 更 多 的 人 把 它 称 作 样式 表 。 
顾名思义 ， 它 是 一 种 设计 网 页 样式 的 工具 。 借 助 CSS 的 蝇 大 功能 ， 网 页 将 在 设计 者 丰 军 
的 想象 力 下 干 变 万 化 。 


2. 3. 1 CSS 概述 


利用 CSS 样式 ， 不 仅 可 以 控制 一 篇 文档 中 的 文本 格式 ， 而 且 采 用 外 部 链接 的 方式 ， 
可 以 控制 多 篇 文档 的 文本 格式 。 与 HTML 样式 不 同 ， 对 CSS 样式 的 定义 进行 修改 时 ， 文 
档 中 所 有 应 用 该 样式 的 文本 格式 也 会 目 动 友 生 改变 。 

CSS 样式 通常 用 名 称 或 是 HTML 标记 来 表示 ，HTML 文档 中 的 CSS 样式 不 仅 可 以 控 
制 大 多 数 传统 的 文本 格式 属性 ,例如 字体 、 字 号 和 对 齐 方式 ,还 可 以 定义 一 些 特殊 的 HTML 
属性 ， 例 如 定位 、 特 别 效 果 和 鼠标 轮 蔡 等 。 

CSS 样式 的 定义 代码 一 般 书写 在 HTML 文档 的 头 部 ， 通 第 由 一 系列 的 样式 定义 组 成 。 
它 可 以 应 用 到 使 用 标准 HTML 标记 所 格式 化 的 文本 上 ; 可 以 定义 到 通过 class 属性 所 定义 
光 围 的 文本 上 ; 也 可 以 应 用 到 其 他 符合 CSS 标准 规范 的 文本 上 。 

Dreamweaver CS6 提供 了 对 CSS 样式 创作 的 完美 文 持 ， 无 需 编 号 代码 即 可 实施 CSS 
最 佳 做 法 。 用 户 可 以 直接 在 “属性 ”面板 中 新 建 CSS 规则 ， 并 在 样式 级 联 中 清晰 、 人 简单 
地 显示 每 个 属性 的 相应 位 置 ， 从 而 可 以 更 方便 地 为 元 又 控制 和 删除 样式 。 狐 增 的 CSS 检 
查 模 式 人 允许 开发 人 员 以 可 视 化 方式 评 细 显示 CSS 框 模 型 属性 ， 包 括 填 充 、 边 框 和 边 距 ， 
轻松 切换 CSS 属性 ,而 无 需 读 取代 码 使 用 独立 的 第 三 方 实用 程序 。 利用 CSS 局 用 / 禁用 
功能 ， 开 发 人 员 可 以 直接 在 CSS 样式 面板 去 挥 注释 或 重 狐 局 用 部 分 CSS 属性 ， 并 可 直接 
伍 看 注释 去 挥 特定 属性 和 值 之 后 页 面 上 上 其 有 的 效果 ， 而 不 必 下 接 在 代码 中 做 出 更 改 。 禁 用 
CSS 属性 只 会 取消 指定 属性 的 注释 , 而 不 会 实际 删除 该 属性 .Dreamweaver CS6 附 市 16 个 
可 供 选 择 的 不 同 CSS 布局 ， 每 个 布局 模板 中 都 有 丰富 的 内 联 注释 解释 布局 ， 初 级 和 中 级 
设计 人 员 不 需要 了 解 CSS 复杂 烦琐 的 语法 ， 束 可 以 快速 学 会 并 目 定 义 这 些 设计 ， 创 建 出 
具有 专业 风格 的 CSS 样式 以 满足 目 己 的 需要 ， 并 将 它们 添加 到 配置 文件 夹 中 。 

Dreamweaver CS6 还 能 够 识别 现存 文档 中 定义 过 的 CSS 样式 ， 这 更 方便 用 户 对 现 有 
文档 进行 修改 。 不 仅 如 此 ,还 可 以 通过 Dreamweaver CS6 的 用 户 界 面 直 接 访 问 Adobe CSS 
Advisor 网 站 。 访 网 站 包含 有 关 最 新 CSS 问题 的 信息 ， 它 可 以 方便 地 为 用 户 提 供 建议 和 
改进 意见 ， 或 者 方便 地 添加 新 的 问题 以 使 整个 社区 都 能 够 从 中 受 共 。 

在 Dreamweaver CS6 中 ，CSS 呈现 功能 有 了 显著 改善 ， 从 而 能 够 在 大 多 数 浏览 右 中 
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呈现 复杂 的 CSS 布局 。 它 完全 支持 高 级 CSS 技术 ， 如 溢出 、 伪 元 素 和 表单 元 素 。 借 助 
HTMLS 扩展 包 ，Dreamweaver CS6 还 可 以 支持 对 CSS 3 代码 提示 ， 改 进 CSS 3 实时 预 


2. 3. 2 ”CSS 样式 表 的 组 成 


梓 式 表 由 样式 规则 组 成 ,告诉 浏览 器 怎样 去 呈现 一 个 文档 。 有 很 多 将 样式 规则 加 入 到 
HTML 文档 中 的 方法 。 但 最 简单 的 局 动 方法 是 使 用 HIML 的 STYLE 组 件 ， 这 个 元 素 放 置 
于 文档 的 HEAD 部 分 ， 包 含 网 页 的 样式 规则 。CSS 样式 表 每 个 规则 的 组 成 包括 一 个 选择 
符 (通常 是 一 个 HTML 的 元 素 ， 例 如 body、p 或 em) 和 该 选择 符 所 接受 的 样式 。 有 很 多 
的 属性 可 用 于 定义 一 个 元 素 ， 每 个 属性 市 一 个 值 ， 共 同 描述 选择 符 应 该 如 何 呈 现 。 样 式 规 
则 组 成 如 下 : 

选择 符 {属性 1: 值 1; 属性 2: 值 2} 
单一 选择 人 符 的 复合 样式 声明 应 该 用 分 号 隔 开 。 以 下 是 一 段 定 义 了 HL 和 H2 元 素 的 凑 
色 和 字体 大 小 属性 : 
<HEAD> 
<TITLE> 第 一 个 CSS 例子 </TITLE> 
<STYLE TYPE="text/css"> 


H1 { font-size: x-large; color: red } 


H2 { font-size: large; color: blue } 
</STYLE> 
</HEAD> 
上 述 的 样式 表 告 诉 浏览 费用 加 大 、 红 色 了 字体 去 显示 一 级 标题 ， 用 大 、 监 色 字 体 去 显示 
二 级 标题 。 
为 了 减少 样式 表 的 重复 声明 ， 组 合 的 选择 符 声 明 是 允许 的 。 例 如 ， 文 档 中 所 有 的 标题 
可 以 通过 组 合 给 出 相同 的 声明 : 
H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif } 
下 面 分 别 绍 样式 表 的 各 个 组 成 部 分 : 
1. 选择 符 
任何 html 元 又 都 可 以 是 一 个 CSS1 的 选择 符 。 选 择 符 仅仅 是 指 癌 特别 样式 的 元 对。 根 
据 声 明 的 不 同 可 把 选择 符 分 为 4 类 : 
令 ”标签 : 单个 html 元 素 作 为 选择 符 。 例 如 : 
P{text-indent: 3em)} 

其 中 选择 符 是 P。 

令 类; 为 样式 规则 命名 的 选择 符 。 一 个 html 元 素 的 选择 符 能 有 不 同 的 class (类 )， 
因而 允许 同一 元 于 有 不 同样 式 。 例 如 网 页 制作 者 希望 文本 在 不 同 段 落 使 用 不 同 的 
颜色 显示 : 

p.red { color: red } 


p.green { color: green } 
以 上 的 例子 建立 了 red 和 green 两 个 类 , 供 不 同 的 段落 使 用 。 各 标签 的 class 属性 用 于 
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5 区 葡 如 小 实 创 玫 表 


<p Class=red> 段 文本 </p> 
则 段 内 文本 使 用 pred 类 样式 。 每 个 选择 人 符 在 茶 一 时 刻 上 只 允许 使 用 一 个 类 。 奖 的 声明 


也 可 以 无 顷 相 天元 隶 ， 例 如 : 
.cn01 { font-size: small } 
在 这 个 例子 ， 名 为 cn01 的 次 可 以 被 用 于 任何 元 素 。 
令 ”复合 内 容 : 复合 内 容 选 择 符 只 不 过 是 一 个 用 罕 格 隔 开 的 两 个 或 更 多 的 单一 选择 符 
组 成 的 字符 串 。 这 些 选 择 人 符 可 以 指定 一 般 属 性 ， 并 且 由 于 层 登 顺序 的 规则 ， 它们 
的 优先 权 比 单一 的 选择 符 大 。 例 如 : 
p em { background: red } 
这 个 例子 中 关联 选择 符 是 p em。 这 个 值 表 示 上 段 洲 中 的 强调 文本 会 是 红色 背景 ; 而 标 
题 的 强调 文本 则 不 受 影 啊 。 
令 ID: ID 选择 符 个 别 地 定义 每 个 元 于 的 成 分 。 这 种 选择 符 应 该 尽量 少 用 ， 因 为 它 
其 有 一 定 的 局 限 。 一 个 DD 选择 和 从 的 指定 要 有 指示 符 "#" 在 名 学 前 面 。 例 如 ，ID 
选择 符 可 以 指定 如 下 : 
#myid{ text-indent: 3em } 
使 用 ID 选择 符 的 方式 如 下 : 
<p id=myid> 文 本 缩 进 3em</p> 
2. 属性 
一 个 属性 被 指定 到 选择 符 是 为 了 使 用 它 的 样式 。 属 性 包括 磊 色 、 边 界 和 了 字体 等 。 
3. 值 
值 是 一 个 属性 接受 的 指定 。 例 如 ， 属 性 颜色 能 接受 值 red。 
4. 注释 
样式 表 里 面 的 注释 使 用 与 C 语言 编程 中 一 样 的 约定 方法 去 指定 。CSS1 注释 的 例子 如 
以 下 格式 : 
六 COMMENTS CANNOT BE NESTED */ 
5. 伪 类 和 伪 元 系 
伪 类 和 伪 元 素 是 特殊 的 类 和 元 素 ， 能 自动 地 被 支持 CSS 的 浏览 器 所 识别 。 伪 类 区 别 
开 不 同 种 次 的 元 素 ， 例 如 visited links (已 访问 的 连接 ) 和 active links( 可 油 活 连接 ) 描述 
了 两 个 定位 销 anchors) 的 类 型 。 伪 元 素 指 元 素 的 一 部 分 ， 例 如 段落 的 第 一 个 字母 。 伪 类 
或 伪 元 素 规 则 的 形式 如 选择 符 : 
伪 类 { 属性 : 值 } 
伪 元 素 { 属性 : 值 } 
伪 闪 和 伪 元 素 不 应 用 html 的 class 属性 来 指定 。 一般 的 类 可 以 与 伪 类 和 伪 元 素 一 起 使 
用 ， 如 下 : 
选择 符 . 类 : 伪 类 { 属性 : 值 } 
选择 从 .类 : 伪 元 素 { 属性 : 值 } 
常用 的 伪 类 和 伪 元 素 有 : 
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仿 ”定位 镭 伪 类 
伪 类 可 以 指定 A 元 素 以 不 同 的 方式 显示 连接 (links)、 已 访问 连接 (visited links) 和 
可 激活 连接 (active links)。 定 位 锚 元 素 可 给 出 伪 类 link、visited 或 active。 一 个 已 访问 连 
接 可 以 定义 为 不 同 颜色 的 显示 ， 甚 至 不 同学 体 大 小 和 风格 。 例 如 : 
A:link { color: red } 


A:active { color: blue; font-size: 125% } 


Ai:visited { color: green; font-size: 85% } 
仿 ” 自 行 伪 元 系 
通 当 报纸 上 的 文章 在 文本 的 首 行 都 会 以 粗 印 体 而 且 全 部 大 写 地 展示 。CSS1 包括 了 这 
个 功能 ， 将 其 作为 一 个 伪 元 素 。 首 行 伪 元 素 可 以 用 于 任何 块 级 元 系 ( 例 如 P、HIl 等 )。 以 下 
是 一 个 首 行 伪 元 素 的 例子 : 
P:first-line{font-variant: small-caps;font-weight: bold} 
令 ”上 自 个 字母 伪 元 么 
首 个 字母 伪 元 素 用 于 产生 加 大 (drop caps) 和 其 他 效果 。 含 有 已 指定 值 选 择 符 的 文本 的 
首 个 字母 会 按照 指定 的 值 展 示 。 一 个 首 个 字母 伪 元 素 可 以 用 于 任何 其 级 元 素 。 例 如 : 
P:first-letter{font-size: 300%; float: left} 
则 段落 中 首 字 母 会 比 普通 字体 加 大 3 倍 。 


2. 3.3” 层 又 顺序 


“ 层 司 ”是 指 浏览 恬 最 终 为 网 页 上 的 特定 元 素 显 示 样 式 的 方式 。 三 种 不 同 的 源 决 定 了 
网 页 上 显示 的 样式 : 由 页 面 的 作者 创建 的 样式 表 、 用 户 的 自 定 义 样式 选择 (如 果 有 ) 和 浏 
览 亏本 喘 的 默认 样式 。 网 页 的 最 终 外 观 是 由 所 有 这 三 种 源 的 规则 共同 作用 《或 者 “ 层 登 ”) 
的 结 采 ， 最 后 以 最 佳 方式 呈现 网 页 。 

实际 上 ， 所 有 在 选择 符 中 骸 套 的 选择 符 部 会 继承 外 层 选 择 符 指定 的 属性 值 ， 除非 为 外 
更 改 。 例 如 ， 一 个 body 定义 了 的 磊 色 值 也 会 应 用 到 段落 的 文本 中 。 有 些 情况 古 内 部 选择 
符 不 继承 周围 选择 符 的 仁 ， 但 理论 上 这 些 都 是 特殊 的 。 例 如 ， 上 边界 属性 是 不 会 继承 的 ; 
直觉 上 ， 一 个 段落 不 会 有 和 文档 body 一 样 的 上 边界 值 。 

当 使 用 了 多 个 样式 表 ， 样 式 表 和 需要 争夺 特定 选择 符 的 控制 权 。 在 这 种 情况 下 ， 总 会 
样式 表 的 规则 能 获得 控制 权 。 以 下 的 特性 将 决定 互相 苋 搜 的 样式 表 的 结果 。 

1. limportant 规则 

规则 可 以 用 指定 的 !importan 特 指 为 重要 的 。 一 个 特 指 为 午 要 的 样式 会 次 敬 于 与 之 对 
芯 的 其 他 相同 权重 的 样式 。 同 样 地 ， 当 网 页 制作 者 和 读者 都 指定 了 重要 规则 时 ， 网 页 制作 
者 的 规则 会 超越 读者 的 。 以 下 是 !important 声明 的 例子 : 

body{ background: white; background-repeat: repeat-x |! important } 

网 页 制作 者 和 读者 部 可 以 去 指定 样式 表 。 当 两 者 的 规则 友 生 冲突 ， 网 页 制作 者 的 规则 
会 优先 于 读者 的 其 他 相同 权重 的 规则 。 而 网 页 制作 者 和 读者 的 样式 表 都 优先 于 浏览 右 的 内 
置 样式 表 。 网 页 制作 者 应 该 小 心地 使 用 !important 规则 ， 因 为 它们 会 超越 用 户 任何 
的 !important 规则 。 例 如 ， 一 个 用 户 由 于 视觉 关系 ， 会 要 求 大 字体 或 指定 的 颜色 ， 而 且 这 
样 的 用 户 会 有 可 能 声明 确定 的 样式 规则 为 !important， 因 为 这 些 样式 对 于 用 户 阅 读 网 页 是 
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极为 重要 的 。 任 何 的 !important 规则 会 超越 一 般 的 规则 ， 上 所 以 建议 网 页 制作 者 使 用 一 般 的 
规则 以 确保 有 特殊 样式 需要 的 用 户 能 阅读 网 页 。 
2. 计算 特性 规则 
计算 特性 规则 基于 它们 的 特性 级 别 。 样式 表 也 可 以 超越 与 之 冲突 的 样式 表 , 一 个 较 玉 
特性 的 样式 永远 都 读 轨 于 一 个 较 低 特性 的 样式 。 这 只 不 过 是 计算 选择 符 的 指定 个 数 的 一 个 
统计 游戏 。 计 算 的 内 容 包 括 : 统计 选择 符 中 的 DD 属性 个 数 、 统 计 选 择 符 中 的 CLASS 属 
性 个 数 和 统计 选择 符 中 的 HTML 标记 名 格式 。 最 后 ， 按 正确 的 顺序 写 出 三 个 数 子 ， 不 要 
加 空格 或 逗号 ， 得 到 一 个 三 位 数 。( 注 意 ， 需 要 将 数字 转换 成 一 个 以 3 个 数字 结尾 的 更 大 
的 数 )。 相 应 于 选择 符 的 最 终 数 学 列表 可 以 很 容 多 确定 较 局 数字 特性 凑 要 于 较 低 数 宇 的 。 
以 下 是 一 个 控 特 性 分 类 的 选择 和 从 的 列表 : 
#id1{xxx} a=1 b=0 c=0 --> 特性 = 100*/ 
UL UL Ll.redfxxx} /* a=0 b=1 c=3 --> 特性 = 013*/ 
Ll.red {xxx}/* a=0 b=1 c=1 --> 特性 = 011*/ 
LI {xxx}y* a=0 b=0 c=1 --> 特性 = 001*/ 
为 了 方便 使 用 ， 当 两 个 规则 上 其 同样 权重 时 取 后 面 的 那个 。 


2.3.4 部 分 哩 用 的 属性 和 值 


1. font-family 属性 
font-family 用 于 指定 网 页 中 文本 的 字体 。 取 值 可 以 是 多 个 字体 ， 字 体 间 用 逗号 分 隔 。 
使 用 示例 : 
body,td,th{font-family: Georgia, Times New Roman, Times, serif;} 
2. font-style 属性 
font-style 属性 用 于 设置 字体 风格 , 取 值 可 以 是 : normal (普通 ), italic( 和 立体 ) 或 oblique 
(倾斜 )。 使 用 示例 : 


P{font-style: normal} 


H1{font-style: italic} 
3. font-size 属性 
font-size 属性 用 于 设置 字体 显示 的 大 小 。 这 里 的 字体 大 小 可 以 是 绝对 大 小 〈xx-small、 
x-Small、small、medium、large、x-large、Xx-large) 相对 大 小 (larser、smaller)、 绝 对 长 
度 〈 使 用 的 单位 为 pt 像素 和 in- 瑞 寸 ) 或 百分比 ， 默 认 值 为 medium。 使 用 示例 : 


hi{font-size: x-large} 


offont-size: 18pt} 
li{font-size: 90%)} 
stong{font-size: larger} 
4. font 属性 
font 属性 用 作 不 同 字 体 属 性 的 略 写 ， 可 以 同时 定义 字体 的 多 种 属性 ， 各 属性 间 以 空格 
间隔 。 使 用 示例 : 
pffont: italic bold 16pt 华文 宋体 } 
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5. color 属性 

color 闫 色 属 性 允许 网 页 制作 者 指定 一 个 元 标的 磊 色 。 使 用 示例 : 
Hi1{color:black} 
H3{color: #ff0000} 

为 了 避免 与 用 户 的 样式 表 之 间 的 冲突 ， 背 景 和 闫 色 属 性 应 该 始终 一 起 指定 。 

6. background-color 属性 

background-color 背景 闫 色 属 性 设 定 一 个 元 到 的 背景 凑 色 ， 取 值 可 以 是 闫 色 代 但 或 
transparent《〈 透 明 )。 使 用 示例 : 

body{background-color: white} 
hi{background-color: #000080} 

为 了 避免 与 用 户 的 样式 表 之 间 的 冲突 , 无论 任何 背景 颜色 被 使 用 的 时 候 ， 背 景 图 像 都 
应 该 被 指定 。 而 大 多 数 情况 下 ，background-image:none 都 是 合适 的 。 网 页 制作 者 也 可 以 使 
用 略 写 的 背景 属性 ， 通 党 会 比 背 景 颜色 属性 获得 更 好 的 文 持 。 

7. backsround-imasge 属性 

background-image 背景 图 像 属 性 设 定 一 个 元 取 的 背景 图 像 。 使 用 示例 : 

body{ background-image: url(/images/bg.gif) } 

为 了 那些 不 载 入 图 像 的 浏览 者 ， 当 定义 了 背景 图 像 后 ,应 该 也 要 定义 一 个 类 似 的 背景 
颜色 。 

8. background-repeat 属性 

background-repeat 属性 用 来 描述 背景 图 片 的 重复 排列 方式 ， 取 值 可 以 是 repeat 〈 治 X 
办 和 YY 轴 两 个 方 癌 重复 显示 图 片 )、repeat-x (党 X 轴 方 同 重 复 图 片 ) 和 repeat-y 〈 沿 Y 轴 
方 同 午 复 图 厂 )。 使 用 示例 : 

body { 


background-image:url(pendant.gif); 


background-repeat: repeat-y; 
} 
9. backeground 属性 
background 背景 属性 用 作 不 同 背 景 属性 的 略 写 ， 可 以 同时 定义 背景 的 多 种 属性 ， 各 属 
性 间 以 空格 则 隅 。 使 用 示例 : 
P{background: url(/images/bg.gif) yellow } 
10. line-height 属性 
line-height 行 高 属性 可 以 接受 一 个 控制 文本 基线 之 间 的 间隔 的 值 . 取 值 可 以 是 normal、 
数字 、 长 度 和 上 百分比 。 当 值 为 数字 时 ， 行 高 由 元 素 学 体 大 小 的 量 与 该 数字 相 乘 所得 。 百 分 
比 的 值 相对 于 元 素 字 体 的 大 小 而 定 。 不 允许 使 用 负 值 。 行 高 也 可 以 由 市 有 学 体 大 小 的 字体 
属性 产生 。 使 用 示例 : 
p{line-height:120%} 
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1. 直接 在 记事 本 里 用 HTML 语言 号 一 个 基本 的 网 页 文件 ， 尽 量 多 用 各 种 标记 。 
2. 用 CSS 样式 控制 段落 中 文本 行 融 为 原来 的 120%。 


2.5 ”思考 题 


1. 除了 Dreamweaver， 还 有 哪些 编辑 磺 可 以 用 来 编辑 HTML 源 文 件 ? 
2. 有 HTML 源 文件 如 下 : 


<html> 
<head> 
<title>Untitled Document</title> 
<style type="text/css"> p{color: red} </STYLE> 
</head> 
<p><font color=green>3》 闫 色 控制 </font></p> 
</body> 
</html> 
文本 “颜色 控制 ”将 以 什么 颜色 显示 ， 为 什么 ? 
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第 3 章 徇 建 下 他 站 点 
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本 章 将 介绍 站 点 的 基本 知识 及 构建 本 地 站 点 的 方法 。 其 内 容 包括 : 站 点 ， 
”的 概念 和 功能 ; 站 点 规划 和 网 站 制作 流程 ; 利用 Dreamweaver CS6 创建 本 : 
;地 站 点 ; 由 已 有 文件 生成 站 点 ; 对 站 点 的 删除 、 修 改 、 编 辑 和 复制 等 操作 ; : 
， 对 站 点 内 文件 和 文件 夹 的 删除 、 修 改 、 编 辑 和 复制 等 操作 以 及 刷新 本 地 站 点 ， 
， 的 方法 。 


国 本 地 站 点 和 远 端 站 点 
国 ”网 站 制作 流程 
财 创建 本 地 站 点 
团 管理 本 地 站 点 
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可 以 使 用 Dreamweaver CS6 来 创建 单个 网 页 ， 但 大 多 数 情况 下 , 用 户 可 能 更 布 望 将 这 
些 单 独 的 网 页 组 合 起 来 ， 成 为 一 个 站 上 点。 拥有 目 己 的 网 站 ， 可 以 说 是 每 个 网 页 创作 者 的 梦 
想 。Dreamweaver CS6 不 仅 提 供 网 页 编辑 功能 ， 而 且 市 有 强大 的 站 点 管理 功能 。 利 用 
Dreamweaver CS6 可 以 先 在 本 地 计算 机 的 磁 稚 上 创建 本 地 站 点 ， 从 全 局 上 控制 站 点 结构 ， 
管理 站 点 中 的 各 种 文档 ， 完 成 对 文档 的 编辑 。 在 完成 站 点 文档 的 编辑 后 ， 可 以 利用 
Dreamweaver CS6 将 本 地 站 点 发 送 到 远 病 Internet 上 的 服务 器 中 ， 创 建 真正 的 站 点 。 

所 谓 站 点 ， 可 以 看 作 是 一 系列 文档 的 组 合 。 这 些 文档 之 间 通 过 各 种 链接 关联 起 来 ， 可 
能 拥有 相似 的 属性 ， 例 如 描述 相关 的 主体 ， 采 用 相似 的 设计 或 实现 相同 的 目的 等 ， 也 可 能 
只 是 坚 无 意义 的 链接 。 利 用 浏览 器 ， 束 可 以 从 一 个 文档 路 转 到 另 一 个 文档， 实现 对 整个 网 
站 的 浏览 。 


3.1.1 本 地 计算 机 和 Internet 服务 器 


一 般 来 说 ， 我 们 所 浏览 的 网 页 都 是 存储 在 Internet 服务 器 上 的 。 所 谓 Internet 服务 器 ， 
了 驶 是 用 于 提供 Internet 服务 (包括 WWW、FTP、e-mail 等 ) 的 计算 机 。 对 于 WWW 浏览 
服务 来 说 ，Internet 服务 器 主要 用 于 存储 Web 站 点 和 页 面 。 

对 于 大 多 数 用 户 来 说 ，Internet 服务 占 只 是 一 个 逻辑 上 名 称 ， 而 不 是 真正 的 可 知 实体 。 
因为 你 不 知道 该 计算 机 到 底 有 多 少 侣 ， 性 能 和 配置 如 何 、 到 底 放 置 在 什么 地 方 等 。 所 访问 
的 网 站 ， 可 能 存储 在 大 洋 彼 层 的 美国 的 计算 机 上 ， 也 可 能 束 存 储 在 隔壁 的 计算 机 上 。 但 是 
在 浏览 网 页 时 ,不 需要 了 人 解 它 的 实际 位 置 ， 只 需要 在 地 址 栏 输入 网 址 ， 按 下 回 车 键 ， 束 可 
以 轻松 实现 对 网 页 的 浏览 。 

对 于 浏览 网 页 的 客户 来 说 ,它们 所 使 用 的 计算 机 被 称 为 本 地 计算 机 。 因 为 用 户 直 接 在 
计算 机 上 操作 ， 启 动 浏览 占 打 开 网 页 。 本 地 计算 机 对 于 用 户 来 说 是 其 正 的 实体 。 

本 地 计算 机 和 Internet 服务 如 之 间 ， 通 过 各 种 线路 (如 电话 线 、ADSL、ISDN 或 其 他 
级 线 等 ) 连接 实现 相互 的 通信 。 在 连接 线路 中 ， 可 能 会 存在 各 种 各 样 的 中 间 环 节 。 


3.1.2 本 地 站 点 和 远 端 站 点 


在 理解 了 Internet 服务 器 和 本 地 计算 机 的 概念 后 ， 了 解 远 问 站 点 和 本 地 站 点 束 很 容易 
了 。 严 格 地 说 ， 站 点 也 是 一 种 文档 的 磁盘 组 织 形式 ， 它 同样 是 由 文档 和 文档 所 在 的 文件 夹 
组 成 的 。 设计 民 好 的 网 站 通常 上 共有 科学 的 结构 ， 利 用 不 同 的 文件 来， 将 不 同 的 网 页 内 容 分 
门 别 类 地 保存 ， 这 是 设计 网 站 的 必要 前 提 。 结构 民 好 的 网 站 , 不 仅 便 于 管理 ,也 便于 更 新 。 

在 Internet 上 所 浏览 的 各 种 网 站 ， 归 根 到 压 其 实 束 是 用 浏览 器 打开 存储 于 Internet 服 
务 右 上 的 HTML 文档 及 其 他 相关 资源 。 基 于 Internet 服务 絮 的 不 可 知 特性 ， 通常 将 存储 于 
Internet 服务 器 上 的 站 点 和 相关 文档 称 作 远 问 站 点 。 

利用 Dreamweaver CS6 可 以 直接 对 位 于 Internet 服务 右上 的 站 点 文档 进行 编辑 和 管 
理 。 但 这 在 很 多 时 候 非 常 不便， 因为 有 很 多 因素 ,例如 网 络 速度 和 网 络 的 不 稳定 性 等， 都 
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会 对 管理 和 编辑 操作 融 来 影 啊 。 

既然 位 于 Internet 服务 器 上 的 站 点 仍然 是 以 文件 和 文件 夹 作为 菇 本 要 素 的 人 磁盘 组 织 形 
式 ， 在 这 种 情况 下 ， 能 不 能 首先 在 本 地 计算 机 的 人 磁盘 上 构建 出 整个 网 站 的 框架 ， 编辑 相应 
的 文档 , 然后 再 将 之 放置 到 Internet 服务 右上 了 呢 ? 答案 是 可 以 的 , 这 束 是 本 地 站 点 的 概念 。 

利用 Dreamweaver CS6， 可 以 在 本 地 计算 机 上 创建 出 站 点 的 框 染 ， 从 整体 上 对 站 点 全 
局 进行 把 握 。 由 于 这 时 候 没 有 同 Internet 连接 ， 因 此 有 人 充 俗 的 时 间 完 成 站 点 的 设计 ， 进 行 
完善 的 测试 。 站 点 设计 完毕 后 ， 可 以 利用 各 种 上 传 工具 ， 例 如 FTP 程序 ， 将 本 地 站 点 上 
载 到 Internet 服务 器 上 ， 形 成 远 闹 站 点 。 


3.1.3 lnternet 服务 程序 


有 些 情况 下 例如， 站 点 中 包含 JSP 程序 )， 仪 仅 在 本 地 计算 机 上 ， 是 无 法 对 站 点 进 
行 完整 测试 的 。 这 时 和 需要 依赖 Internet 服务 程序 。 

在 本 地 计算 机 上 安 猴 Internet 服务 程序 ， 实 际 上 是 将 本 地 计算 机 构建 成 一 个 真正 的 
Internet 服务 右 ， 只 是 可 以 从 本 地 计算 机 上 下 接 访问 该 服务 器 而 已 。 换 名 话说 ， 本 地 计算 
机 和 Internet 服务 器 已 经 合 二 为 一 。 

Apache Web Server 是 世界 上 占有 率 最 高 的 Web 服务 如 产品 ,可 以 在 包括 SUN Solaris、 
IBM AIX、SGIIRIX、Linux 和 Windows 在 内 的 许多 操作 系统 下 运行 。Apache Web Server 
下 JSP 可 以 通过 免费 的 Apache Jserv 和 GNU JSP、Jakarta-Tomcat 实现 ， 也 可 以 使 用 商业 
的 JRUN (LiveSoftware)、Weblogic (BEA )、Websphere (IBM) 来 实现 。 

微软 的 Windows 应 用 十 分 广泛 ， 依 据 操作 系统 的 不 同 ， 应 该 安 帮 不 同 的 程序 ， 例 如 ， 
对 于 Windows 98， 可 以 安装 Personal Web Server; 对 于 Windows NT、Windows 2000 、 
Windows XP 可 以 安装 Internet Information Server。 在 安装 完 IIS 系列 程序 后 ， 可 以 通过 访 
问 http:Wlocalhost 地 址 测试 程序 是 否 安 朔 成功 。 

如 果 成 功 安 状 了 Internet 服务 程序 ， 束 可 以 在 本 地 计算 机 上 创建 真正 的 Internet 环境 ， 
对 创作 的 站 点 进行 充分 测试 ， 当 然 ， 这 种 测试 是 不 需要 真正 连 入 Internet 的 。 


3.1.4 上 传 和 下 载 


上 传 和 下 载 是 在 互联 网 上 传输 文件 的 专门 术语 。 一 般 来 说 ， 用 户 把 日 己 计 算 机 上 的 文 
件 复制 到 远程 计算 机 上 的 过 程 称 作 上 传 ; 相反 ,用户 从 茶 台 远程 计算 机 上 复制 文件 到 目 己 
计算 机 上 的 过 程 称 作 下 载 。 

实际 上 ， 在 正常 的 浏览 过 程 中 ,经 常会 进行 上 下 载 操 作 。 例 如 在 本 地 计算 机 上 浏览 区 
页 ， 实 际 上 就 是 将 Internet 服务 器 上 的 网 页 下 载 到 本 地 计算 机 上 浏览 ， 很 多 网 站 《如 电子 
商务 网 站 或 免费 电子 邮件 网 站 )， 都 会 要 求 用 户 输入 用 户 名 称 和 密码 ， 这 实际 上 婚 是 将 用 
户 的 信息 上 载 到 Internet 服务 器 上 。 

上 传 和 下 载 操作 不 仅 于 此 ， 利 用 其 他 的 一 些 工 具 ， 例 如 FTP 程序 等 ， 可 以 直接 将 
Internet 服务 器 上 的 站 点 结构 及 其 中 的 文档 下 载 到 本 地 计算 机 ， 经 过 修改 ， 又 可 将 修改 后 
的 网 页 上 载 到 Internet 服务 器 上 ， 实 现 对 站 点 的 更 新 。 

Dreamweaver CS6 改善 了 FTP 性 能 , 利用 多 线程 FTP 传输 工具 和 改 民 的 图 像 编 辑 功 
能 ， 可 以 有 效 地 设计 、 开 发 并 发 布 网 站 。 利 用 对 jQuery Mobile 和 Adobe PhoneGap™ 框 
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间 。 上 此外， 利用 FTPS 和 FTPeS 通信 协定 的 本 地 支持 ，Dreamweaver CS6 可 以 更 安全 地 


部 署 文件 。 
3.1.5 网 页 的 设计 和 出 版 流程 


为 了 更 好 地 进行 站 点 管理 和 网 页 创作 , 还 需要 了 解 在 Dreamweaver CS6 中 的 网 页 设计 

和 出 版 流程 ， 现 在 介绍 如 下 : 

(1) 创建 站 点 的 第 一 步 是 对 站 点 进行 规划 。 需 要 了 解 站 点 的 目的 ， 人 确定 它 要 提供 什 
么 服务 ， 网 页 中 应 该 出 现 什 么 内 容 每 。 在 这 一 步 里 ， 利 用 一 张 纸 和 一 文笔 束 能 很 好 地 解决 
问题 。 有 时 候 ， 一 个 民 好 的 构思 ， 比 实际 的 技术 显得 更 为 重要 ， 因 为 它 生 接 决 定 站 点 质量 
和 将 来 的 访问 流量 。 

(2) 创建 站 点 的 基本 结构 。 利 用 Dreamweaver CS6， 可 以 在 本 地 计算 机 上 构建 出 整 
个 站 点 的 框 名 ， 并 在 各 个 文件 夹 中 合理 地 安置 文档 。 如 果 已 经 构建 了 目 己 的 站 点 ， 也 可 以 
利用 Dreamweaver CS6 来 编辑 和 更 新 现 有 的 站 点 。Dreamweaver CS6 可 以 在 站 点 窗口 中 以 
两 种 方式 显示 站 点 结构 ,一 种 是 目录 结构 ， 男 一 种 是 站 点 地 图 。 可 以 使 用 站 点 地 图 方式 快 
速 构 建 和 查看 站 点 原型 。 

(3) 开始 具体 的 网 页 创作 过 程 。 一 旦 创建 了 本 地 站 点 ， 就 可 以 在 其 中 组 织 文 档 和 数 
据 。 一般 来 说 , 文档 束 是 在 访问 站 点 时 可 以 浏览 的 网 页 。 文档 中 可 能 包含 其 他 类 型 的 数据 ， 
例如 文本 、 图 像 、 声 音 、 动 男 和 超级 链接 等 。 可 以 利用 Dreamweaver CS6 创建 至 白 的 文档 ， 
可 以 利用 模板 来 批量 生成 具有 统一 风格 的 文档 , 也 可 以 打开 和 编辑 由 其 他 应 用 程序 产生 的 
文档 。 在 文档 窗口 中 可 以 输入 文学 和 其 他 资源 ， 例 如 图 像 、 水 平 线 和 其 他 对 象 等 ， 它们 大 
多 可 以 通过 对 和 象 耐 板 或 “插入” 采 早 来 完成 插入 。 

(4) 在 站 点 编辑 完成 后 , 需要 将 本 地 的 站 点 同位 于 Internet 服务 器 上 的 远 病 站 点 关联 
起 来 ， 然 后 定期 更 狐 。 


3.2 规划 站 斥 


在 Dreamweaver CS6 中 ,“ 站 点 ”这 个 术语 ， 既 可 以 用 于 表示 位 于 Internet 服务 器 上 
的 远 问 站 点 ， 也 可 以 用 于 表示 位 于 本 地 计算 机 上 的 本 地 站 上 点。 一般 来 说 ， 应 该 首先 在 本 地 
计算 机 上 构建 本 地 站 点 ， 创 建 合 理 的 站 点 结构 ， 使 用 合理 的 组 织 形 式 管 理 站 点 中 的 文档 ， 
并 对 站 点 进行 必要 的 测试 。 在 一 切 都 准备 好 之 后 ， 再 将 站 点 上 传 到 Internet 服务 左上， 以 
便 他 人 的 浏览 。 

3.2.1 规划 站 点 结构 

合理 的 站 点 结构 ， 能 够 加 快 站 点 设计 ， 提 高 工作 效率 ， 克 省 工作 时 间 。 如 果 将 一 切 网 
页 都 存储 在 一 个 目录 下 ， 当 站 点 的 规模 越 来 越 大 时 ,管理 起 来 就 会 变 得 很 不 容易 。 因 此 一 
般 来 说 ， 应 该 利用 文件 夹 来 管理 文档 。 

在 规划 站 点 结构 时 ， 一 般 应 该 性 循 如 下 一 些 规则 : 
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1. 用 文件 夹 来 保存 文档 

一 般 来 说 ， 应 该 用 文件 夹 来 合理 构建 文档 的 结构 。 首 先 为 站 点 创建 一 个 根 文件 夹 〈 根 
目录 )， 然 后 在 其 中 创建 多 个 子 文 件 来 ， 再 将 文档 分 门 别 类 存储 a 到 相应 的 文件 夹 中， 必要 
时 可 以 创建 多 级 子 文件 来 。 

例如 ， 可 以 在 About 文件 夹 中 放置 用 于 说 明 公司 介绍 的 网 页 ;可 以 在 Product 文件 来 
中 放置 天 于 公司 产品 方面 的 网 页 。 

2. 使 用 合理 的 文件 名 称 

使 用 合理 的 文件 名 非常 重要 ,特别 是 在 网 站 的 规模 变 得 很 大 时 。 文件 名 应 该 容易 理解 ， 
让 人 看 了 就 能 够 知道 网 页 表述 的 内 容 。 

如 果 不 考 虑 那些 仍然 使 用 不 支持 长 文件 名 操作 系统 的 用 户 , 那么 可 以 使 用 长 文件 名 来 
命名 文件 ， 以 充分 表述 文件 的 含义 和 内 容 ; 如 果 用 户 中 可 能 仍然 有 人 使 用 不 支持 长 文件 名 
的 操作 系统 ， 则 应 该 尽量 用 短文 件 名 命名 文件 。 

尽管 中 文 文件 名 对 于 中 国人 来 说 ， 更 清晰 易 恒 ， 但 是 应 该 避免 使 用 中 文 文件 名 ， 因 为 
很 多 Internet 服务 需 使 用 的 是 英文 操作 系统 ， 不 能 对 中 文 文件 名 提供 很 好 的 文 持 ， 而 且 浏 
览 网 站 的 用 户 也 可 能 使 用 更 文 操作 系统 , 中 文 的 文件 名 称 同样 可 能 导致 浏览 错误 或 访问 失 
败 。 如 果实 在 对 瑞 文 不 熟悉 ， 可 以 用 汉语 拼 首 作 拼 写 文件 名 称 。 

很 多 Internet 服务 咒 采 用 Unix 操作 系统 ， 它 是 区 分 文件 的 大 小 写 的 。 例 如 Index.html 
和 index.html 是 完全 不 同 的 两 个 文件 ， 而 且 可 以 同时 出 现在 一 个 文件 夹 中 。 因 此 ， 建 议 在 
构建 的 站 点 中 ， 全 部 使 用 小 写 的 文件 名 称 。 

3. 合理 分 配 文档 中 的 资源 

文档 中 不 仅仅 是 文字 , 它 还 可 以 包含 其 他 任何 类 型 的 对 象 , 例如 图 像 、 声 首 、 动 夯 等 ， 
这 些 文档 资源 通 第 不 能 直接 存储 在 HTML 文档 中 ， 因 此 需要 考虑 它们 的 存放 位 置 。 

一 般 来 说 ， 可 以 在 站 点 中 创建 一 个 Resource〔( 资 源 ) 文件 夹 ， 然 后 将 相应 的 资源 保存 
在 该 文件 夹 中 。 

有 两 种 方式 存储 资源 ， 一 种 是 整个 站 点 共用 一 个 Resource 文件 夹 ， 所 有 的 文档 资源 
都 保存 在 其 中 。 当 然 ， 在 Resource 文件 夹 中 可 以 再 有 子 文件 来 ， 按 照 不 同 的 文档 或 不 同 
的 资源 类 型 ,分门别类 地 存储 。 

另 一 种 存储 资源 的 方式 是 在 每 个 存储 不 同类 型 文档 的 文件 夹 中 都 创建 一 个 Resource 
文件 夹 ， 然 后 在 其 中 按 类 型 分 门 询 类 地 存储 资源 。 

两 种 存储 方式 各 有 其 便利 之 处 ， 建议 采用 前 一 种 方式 ， 因 为 它 可 以 从 整体 上 对 整个 文 
档 的 资源 进行 保存 和 控制 ， 避 人 免 存 储 资源 的 浪费 。 

4. 将 本 地 站 点 和 远 六 站 点 设置 为 同样 的 结构 

为 了 便于 维护 和 管理 ,应 该 将 远 问 站 点 的 结构 设计 成 与 本 地 站 点 相同 。 这 样 在 本 地 站 
点 上 进行 文件 夹 和 文件 上 的 操作 ， 都 可 以 与 延 端 站 点 上 的 文件 夹 和 文件 一 一 对 应 。 当 操作 
完 本 地 站 点 后 ， 利 用 Dreamweaver CS6 将 本 地 站 点 上 传 到 Internet 服务 器 上 ， 可 以 保证 远 
疹 站 点 是 本 地 站 点 的 完整 复制 ， 以 侈 发 生 错 误 。 


3.2.2 规划 站 点 的 浏览 机 制 


很 多 站 点 都 会 包含 多 个 网 页 ， 如 何 让 用 户 知 道 这 些 网 页 并 访问 它们 ， 这 是 网 站 创建 者 
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aver CTSANCBT 文 阴 霉 准 实 创 坝 户 
必须 考虑 的 事情 。 如 采用 户 不 知 ; 道 如 何 访 问 需 要 的 网 页 ,也 就 无 法 得 到 他 们 想 获 得 的 信息 ， 
网 站 的 目的 也 就 没有 达到 。 

一 般 来 说 ,应 该 在 网 站 创建 时 期 规划 站 点 的 浏览 机 制 。 目 的 是 提供 清晰 易 懂 的 浏览 方 
法 ， 采 用 标准 统一 的 网 页 组 织 形式 ， 引 导 用 户 轻 松 目 如 地 访问 每 个 他 们 要 访问 的 网 页 。 

在 规划 站 点 的 浏览 机 制 时 ， 一 般 可 以 考虑 如 下 的 方法 : 

(1) 创建 返回 主页 链接 。 应 该 在 站 点 的 每 个 页 面 上 ， 都 放置 返回 主页 的 链接 。 我 们 

能 都 过 到 过 这 样 的 事情 ， 在 浏览 了 多 个 页 面 之 后 ， 迷 失 了 目 己 的 方向 ， 不 知道 如 何 返 回 

， 很 多 没有 耐心 的 人 会 因此 失去 对 当前 环境 的 信任 ， 转 而 开始 浏览 其 他 的 网 
站 。 如 果 在 网 页 中 包含 返回 主页 的 链接 , 孢 可 以 确保 用 户 在 不 知道 目 己 目前 位 置 的 情况 下 ， 
快速 返回 到 一 个 熟悉 的 环境 中 ,继续 开始 浏览 站 点 中 的 其 他 内 容 。 返回 主页 的 链接 ， 能 起 

到 很 强 的 挽留 用 户 的 作用 。 

(2) 显示 网 站 专题 目录 。 应 该 在 主页 或 任何 一 个 页 面 上 ， 提供 站 点 的 简明 目录 结构 ， 
引导 用 户 从 一 个 页 面 快 速 进入 到 其 他 的 页 面 上 。 很 多 网 站 使 用 框架 技术 , 在 页 面 的 顶端 或 
是 左 闹 显示 当前 网 站 的 专题 目录 ， 单 击 相 应 的 链接 ， 束 可 以 从 一 个 专题 页 和 面 中 ,快速 跳 转 
到 男 一 个 专题 页 面 上 。 

Dreamweaver CS6 的 帮助 系统 实际 上 就 是 采用 了 框架 技术 , 它 在 页 面 左 方 显 示 专 题目 
录 ， 用 户 只 需 单 击 相 应 的 目录 项 ， 即 可 快速 跳 转 到 需要 的 网 页 上 。 

(3) 显示 当前 位 置 。 无 论 在 任何 网 页 上 ， 都 要 在 很 明显 的 地 方 标 出 当前 网 页 在 站 点 
中 的 位 置 ， 或 是 显示 当前 网 页 说 明 的 主题 ， 以 帮助 用 户 了 解 他 们 到 底 在 访问 什么 地 方 。 如 
果 页 和 面 航 套 过 多 ， 则 可 以 通过 创建 “前 进 ” 和 “后 退 ” 之 类 的 链接 帮助 用 户 浏览 。 

(4) 搜索 和 索引 。 对 于 一 些 数据 型 的 网 站 ， 应 该 给 用 户 提 供 搜索 的 功能 ， 或 是 给 用 
户 提 供 索 引 检索 的 权力 ， 使 用 户 快 速 租 找到 目 己 需要 的 信息 。 

Dreamweaver CS6 的 帮助 系统 实际 上 也 采用 了 这 种 机 制 。 它 利用 框架 技术 ， 在 页 和 耐 项 
闹 建 六 了 了 目录、 搜索 和 索引 等 链接 ， 以 便 用 户 快 速 找到 他 们 需要 的 信息 。 

网 页 在 出 版 后 ， 或 多 或 少 会 存在 一 些 问 题 ， 从 用 户 那 里 及 时 获取 他 们 对 网 站 的 意见 和 
建议 是 非常 重要 的 。 为 了 及 时 从 用 户 处 了 解 到 相关 信息 ， 应 该 在 网 页 上 提供 用 户 与 网 页 创 
作者 或 网 站 溃 理 员 的 联系 途径。 各 用 的 方法 是 将 网 页 创作 者 或 网 站 省 理 员 公布 在 网 页 上 ， 
或 是 创建 一 个 E-mail 超级 链接 ， 和 帮助 用 户 快 速 将 信息 回馈 到 网 站 中 。 


3.2.3 ”构建 整体 的 站 后 风格 


站 点 中 的 网 页 风格 应 该 具有 统一 性 ,这 样 能 够 突出 站 点 要 表述 的 主题 ,也 同时 能 够 帮 
助 用 户 快 速 了 解 站 点 的 结构 和 浏 吃 机 制 |。 

在 Dreamweaver CS6 中 ,可 以 利用 模板 快速 批量 创建 具有 相同 或 相似 风格 的 网 页 ， 然 
后 再 在 这 个 基础 上 对 网 页 进行 必要 修改 ， 以 实现 网 页 的 风格 统一 。 

文档 风格 统一 化 的 特征 之 一 束 是 在 多 个 网 页 上 下 复出 现 某 些 对 象 ， 如 文本 、 图 像 或 声 
首 等 。 例 如 , 可 以 在 每 个 网 页 的 左上 角 放 置 公司 的 徽标 , 在 右 下 角 放 置 创作 者 的 联系 地 址 。 

实际 创作 时 ， 维 护 这 种 风格 的 操作 可 能 并 不 人 简单 。 例 如， 一 个 公司 的 徽标 可 能 由 儿 幅 
更 小 的 图 像 和 文本 组 合 而 成 ， 要 放置 公司 的 徽标 ， 不 仅 需要 在 页 面 中 插入 网 像 和 文本 ， 还 
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需要 精确 调节 它们 之 间 的 相对 位 置 ， 以 最 后 形成 徽标 。 如 条 要 往 多 个 网 页 上 放置 徽标 ， 对 
每 个 网 页 都 需要 进行 上 述 索 琐 的 操作 ， 而 且 还 可 能 由 于 位 置 摆 放 得 不 齐 等 原因 ， 造 成 网 册 
间 徽 标 形 象 的 不 统一 , 从 而 影响 网 站 的 整体 质量 。 为 了 解决 这 种 问题 , 在 Dreamweaver CS6 
中 引入 了 库 的 概念 。 在 创作 网 页 时 ， 可 以 将 这 些 被 重复 使 用 的 东西 或 组 合 制 作成 库 并 保存 
起 来 ， 当 下 次 要 往 网 页 上 放置 相同 对 象 或 组 合 时 ， 只 需要 简单 地 从 库 中 调用 就 可 以 了 。 这 
不 仅 简 化 了 操作 ， 而 且 可 以 确保 页 面 间 对 象 或 组 合 的 绝对 一 致 。 


3.3 构建 本 地 站 斥 


3.3.1 创建 新 站 点 


Dreamweaver CS6 简化 了 “站 点 设置 ? 对话 框 ( 即 以 前 版 本 中 的 “站 点 定义 ”对话 框 )， 
使 设置 本 地 Dreamweaver 站 点 更 简单 。 
下 面 以 建立 本 地 站 点 cafe 的 简单 实例 演示 创建 新 站 点 的 具体 步骤 : 
(1) 局 动 Dreamweaver CS6， 执行“ 站 点 ”| “管理 站 点 ”命令 ， 弹 出 “管理 站 点 ?” 
对 话 框 ， 如 图 3-1 所 示 。 如 果 还 没有 建 任 何 站 点 ， 则 列表 框 是 空 的 。 


图 3-1 “管理 站 点 ”对 话 框 

(2) 单 击 “ 新 建站 点 ”按钮 ， 在 弹出 的 下 拉 菜 单 中 执行 “站 点 ”命令 ， 或 直接 执行 
“站 点 ”| “新 建站 点 ”命令 ， 在 弹出 的 对 话 框 中 单 击 “站 点 ”选项 卡 ， 然 后 输入 站 点 名 
称 ， 并 指定 本 地 站 点 文件 夹 的 路 径 : 

全 “站 点 名 称 ” 用 于 设置 新 建站 点 的 名 称 。 该 名 称 仅 供 参考 ， 并 不 出 现在 浏览 器 
中 。 

令 “本 地 站 点 文件 夹 ” 用 于 设置 本 地 站 点 根 目 录 的 位 置 。 可 以 单 击 其 后 的 文件 夹 
按钮 ， 打 开 一 个 对 话 框 ， 然 后 从 磁盘 上 定位 该 目录 。 也 可 以 直接 在 文本 框 中 输入 
绝对 地 址 。 

(3) 单 击 “高 级 设置 ”选项 卡 ， 然 后 在 其 子 洋 单 中 选择 “本 地 信息 ” 如 图 3-2 所 示 。 
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及 


默认 图像 立 件 夹 ; | CInetpubyWwwwrootimages 


站 点 范围 媒体 查询 文件 ; 
链接 相对 于 ; (%) 文档 〇 站 点 根 目录 


Web URL: | http:iilocalhost/ 
如 果 没 有 定义 远程 服务 器 ， 语 输入 Web URL。 如 果 已 定 兴 远程 
服 备 器 ，Dreamweaver 将 使 用 服务 器 设置 中 指定 的 Web URL。 


[区 分 太 小 写 的 链接 检查 


M 启用 丝 存 


组 疗 中 保存 着 站 点 中 的 父 件 和 资源 信息 。 这 将 加 快 资源 面板 和 
链接 管理 功能 的 速度 。 


图 3-2 本 地 信息 

对 话 框 中 各 选项 的 功能 分 别 介 绍 如 下 : 

令 “默认 图 像 文件 夹 ” 用 于 设置 本 地 站 点 图 像 文件 的 默认 保存 位 置 。 

令 “链接 相对 于 ”用 于 设置 为 链接 创建 的 文档 路 径 的 类 型 ， 有 文档 相对 路 径 或 根 

目录 相对 路 径 。 
令 “Web URL” 用 于 设置 本 站 点 的 地 址 ， 以 便 Dreamweaver CS6 对 文档 中 的 绝对 
地 址 进行 校 验 ， 如 果 目 前 沿 没 有 申请 域名 ， 可 以 暂时 输入 一 个 容易 记忆 的 名 称 ， 
将 来 申请 域名 后 ， 再 用 正确 的 域名 进行 符 换 。 

令 “区 分 大 小 写 的 链接 检查 ”选中 此 项 后 ， 对 站 点 中 的 文件 进行 链接 检查 时 ， 将 
人 全 链接 的 大 小 写 与 文件 名 的 大 小 写 是 否 相思 配 , 此 选项 用 于 文件 名 区 分 大 小 写 
的 UNIX 系统 。 

全 “月 用 缓存” 创建 本 地 站 点 的 缓存 以 加 快 站 点 中 链接 更 狐 的 速度 ， 同 时 在 站 点 
地 图 模式 中 ， 清 晰 地 反映 当前 站 点 的 结构 。 

(4) 设置 对 话 框 ， 本 例 具体 设置 ， 如 图 3-2 所 示 。 

如 果 要 创建 动态 网 站 ， 还 需要 按 以 下 步骤 指定 远程 服务 器 和 测试 服务 占 。 在 
Dreamweaver CS6 中 ， 用 户 可 以 在 一 个 视图 中 指定 远程 服务 器 和 测试 服务 器 ， 从 而 使 用 户 
可 以 用 前 所 未 有 的 速度 快速 建立 网 站 ， 分 阶段 或 联网 站 点 其 至 还 可 以 使 用 多 台 服 务 右 。 

(5) 单 击 “ 服 务 器 ”类 别 ， 在 图 3-3 所 示 的 对 话 框 中 单 击 添加 新 服务 器 按钮 [十 |， 添 
加 一 个 独 服 务 器 ， 如 图 3-4 所 示 。 

(6) 在 “服务 嚣 名称” 文本 框 中 ， 指 定 狐 服务 器 的 名 称 。 该 名称 可 以 是 所 选择 的 任 
何 名 称 。 

(7) 在 “连接 方法 ”弹出 采 蛙 中 选择 连接 到 服务 器 的 方式 ， 如 图 3-5 所 示 。 

如 条 选择 “FTP” 则 要 在 “FTP 地 址 ”文本 框 中 输入 要 上 传 到 的 FTP 服务 器 的 地 址 、 
连接 到 FTP 服务 器 的 用 户 名 和 密码， 并 单 击 “测试 ”按钮 测试 FTP 地 址 、 用 户 名 和 和 密 
但 。 然 后 在 “ 根 目 录 ” 文 本 框 中 输入 远程 服务 器 上 用 于 存储 公开 显示 的 文档 的 目录 《文件 
夹 )。 如 末 仍 需要 设置 更 多 选项 ， 则 展开 “更 多 选项 ”部 分 。 如 网 3-6 所 示 。 
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靖 点 设置 对 象 cafe 


您 将 在 此 位 置 选择 学 载 web 上 的 页 面 的 服务 器 。 此 对 话 框 的 设置 来 自 


Internet 服务 提供 商 (ISP) 或 Web 管理 员 。 


注意 ; 要 开始 在 Dreamweaver 站 点 上 工作 ， 您 无 需 完成 此 步骤 。 如 果 要 和 连接 到 web 并 发 


布 页 面 ， 您 只 需 定 以 一 个 远程 服务 器 即 可 。 


| 连接 | 远程 “| 测试 | 


多 3-3 “站 点 设置 ”对 话 框 


站 点 设置 对 甸 cafe 


Rs 和 [se | 
本 法 
Fr 地 址 [| |] 请 D， 
RFPS:| | 
密友 [| ID 多 
训 试 
根 上 录 ': | | 
We 


* 更 多 选项 


到 3-4 “站 点 设置 ”对 话 框 


站 点 设置 对 


EE 高 级 
服务 器 名 称 ; 


连接 方法 ; 
FTP 地 址 ; 


5FTP 

用 户 名 :| | FTP over 55LTL5〔 隐 式 加 密 ) 
密码 ;| | FTP over 55LITL5( 显 式 加 密 ) 

本 地 | 网 络 NR 

WebDAaw 

根 目 录 :| RDs 


Web URL: | http: iilocalhost/ 


* 更 多 选项 


3-5 选择 连接 服务 囊 的 方法 
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D2 


FTP 地 址 是 计算 机 系 这 的 完整 Internet 名 称 ， 如 ftp.mindspring.com。 请 输入 完整 的 
地 址 ， 并 且 不 要 附 袖 其 他 任何 文本 ,特别 是 不 要 在 地 址 前 面 加 上 协议 名 。 如 采 不 知道 FIP 
地 址 ， 请 与 Web 托管 服务 商 联 系 。 

如 果 不 能 人 确定 应 输入 哪些 内 容 作 为 根 目 录 , 请 与 服务 器 官 理 员 联系 或 将 文本 框 你 留 为 
宇 白 。 在 有 些 服务 左 上 ， 根 目录 残 是 首次 使 用 FTP 连接 到 的 目录 。 夺 要 确定 这 一 点 ， 请 
连接 到 服务 器 。 如 果 出 现在 i ”和 面板 “远程 文件 ”视图 中 的 文件 夹具 有 像 public_html、 
www 或 用 户 名 这 样 的 名 称 ， 它 可 能 束 是 应 该 在 “ 根 目 录 ” 文 本 框 中 输入 的 目录 。 


“注意: 

己 2 端口 21 是 接收 FTP 连接 的 默认 端口 。 可 以 通过 编辑 右 侧 的 文本 框 来 更 

改 默认 端口 号 。 保存 设置 后 ,FTP 地 址 的 结尾 将 附加 上 一 个 冒号 和 新 的 端口 号 (例如 ， 

ftp.mindspring. com: 29 )。 

驮 认 情 况 下 ， Dreamweaver 会 体 存 密码 。 如 采 布 望 每 次 连接 到 远程 服务 右 时 Dream 
weaver 都 提示 输入 密码 ， 请 取消 选择 “保存 ”选项 。 

(8) 在 “Web URL” 文 本 框 中 , 输入 Web 站 点 的 URL。Dreamweaver 使 用 Web URL 
创建 站 点 根 目录 相对 链接 ， 并 在 使 用 链接 检查 器 时 验证 这 些 链接 。 

(9) 如 图 3-7 所 示 单 击 “ 保 和 存 ” 按 钮 关闭 “基本” 屏 和 大。 然后 在 “服务 右 ” 类 别 中 ， 
指定 刚 添加 或 编辑 的 服务 占 为 远程 服务 占 或 《和 ) 测试 服务 右 。 


服 邯 器 名 称 ，| testserver | 
连接 方法 : | FTP | a 
您 将 在 此 位 置 选择 学 载 web 上 的 页 面 的 服务 器 。 此 对 话 框 的 设置 来 自 
FTP 地 址 ; | 端口， Internet 服务 提供 商 (ISP) 或 Web 管理 员 。 
9 ] | 总 ; 要 天才 本 bremweaver 站 点 上 下 作 ， 您 无 完成 此 步 颈 。 如 果 要 连接 到 Web 并 发 
密码 ， 口 保存 需 定 尽 一 个 远 
二 地 址 连接 | 远程 | 测试 | 
根 目录 ， | estserver C:lInetpubjwwwroot 本 地 |! 网络 [MI 
Web URL; | http: filocalhost; | 


了 更 多 选项 
[Vi 使 用 被 动 式 FTP 
口 使 用 IPv6 传输 模式 


[Vi 使 用 FTP 性 能 忧 化 
口 使 用 其 它 的 FTP 移动 方法 


保存 取消 


图 3-6 设置 更 多 选项 图 3-7 询问 是 否 逢 要 远程 服务 占 
如 果 计 划 开 发 动态 网 页 , Dreamweaver 需要 测试 服务 右 的 服务 以 便 在 进行 操作 时 生成 

和 显示 动态 内 容 。 测试 服务 器 可 以 是 本 地 计算 机 、 开 发 服务 器 、 中 间 服 务 占 或 生产 服务 占 。 
设置 测试 服务 器 的 步骤 如 下 : 

(10) 在 “站 点 设置 ”对 话 框 的 “服务 堪 ” 类 别 中 单 击 “ 添 加 新 服务 句 ” 投 钮 ， 添 加 
一 个 新 服务 器 ， 或 选择 一 个 已 有 的 服务 器 ， 然 后 单 击 “ 编 辑 现 有 服务 器 ”按钮 。 

(11) 在 弹出 的 如 图 3-5 所 示 的 对 话 框 中 根据 需要 指定 “基本 ”选项 ， 然 后 单 击 “ 局 
级 ” 按 乌 。 如 图 3-8 所 未 。 
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(12) 在 测试 服务 器 中 ， 选 择 要 用 于 Web 应 用 程序 的 服务 器 模型 ， 如 图 3-9 所 示 。 


vy 注意 
NN 


2 指定 测试 服务 器 时 ， 必 须 在 “基本 ”选项 界面 中 指定 Web URL. 


”注意 : 
Cy 从 Dreamweaver CS6 开始 ，Dreamweaver 将 不 再 安装 ASP. NET、ASP 
JavaScript 或 JSP 服务 器 行为 。 如果 正在 处 理 ASP. NET、ASP JavaScript 或 JSP 页 ， 
Dreamweaver 对 这 些 页 面 仍 将 支持 实时 视图 、 代 码 颜 色 和 和 代码 提示 。 无 需 在 “站 点 设 
署 ” 对 话 框 中 选择 ASP. NET、ASP JavaScript 或 JSP 即 可 使 用 这 些 功 能 。 


F 远程 服务 器 
[VM 维护 同步 信息 
口 保存 时 自动 将 净 件 上 传 到 服务 器 
远程 服务 器 中 启用 交 件 职 出 功能 
[Vi 维护 同步 信息 M 打开 识 件 之 前 职 出 
口 ] 保存 时 自动 将 次 件 上 传 到 服务 器 职 出 名 称 : 
口 ] 自用 文件 取出 功能 电子 邮件 地 址 ; 
妇 打 开 廊 件 之 前 取出 
取出 名 称 ， 宙 试 服务 器 
服务 器 模型 ; 
电子 邮件 地 址 ， 无 
SP JavaScript - 
测试 服务 器 ASP YBScript 取消 
ET a 
| 全 SP.NET VB 
: | ColdFusion 
保存 取消 号 
PHP MySQL 
图 3-8 设置 远程 服务 器 和 测试 服务 喜 图 3-9 ”选择 服务 右 模 型 


(13) 单 击 “ 保 存 ” 按 钮 ， 然 后 在 “ 服务 器 ”类 别 中 ， 指 定 刚才 作为 测试 服务 器 而 
添加 或 编辑 的 服务 器 。 

(14) 单 击 对 话 框 中 的 “确定 ”按钮 ， 返回“ 站 点 管理 ”对 话 框 。 这 时 对 话 框 里 列 出 
了 刚 创 建 的 本 地 站 点 ， 如 图 3-10 所 示 。 


一 » re Es 
[导语 | [导入 Dunness Cae 站 褒 | | 厂 新 于 中 点 | | 新兴 Duress Cotay 红 中 磺 


林山 


图 3-10 ”新 建 的 站 后 
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WY (CYXB 守 次 各 准 实 创 我 在 
3.3.2 由 已 有 文件 生成 站 点 


实际 上 也 可 以 将 倍 盘 上 现 有 的 文档 组 织 当 作 本 地 站 点 打开 。 这 需要 在 “站 点 设置 ”对 
话 框 中 “站 点 ”的 “本 地 站 点 文件 夹 ” 文 本 框 里 填 入 相应 的 根 目 录 信 息 即 可 。 利 用 访 特 性 ， 
可 以 对 现 有 的 本 地 站 点 进行 管理 。 

例如 本 地 计算 机 E:\fashion\ 目 录 下 有 一 个 网 站 的 网 ， 通 过 Dreamweaver CS6 的 站 点 
管理 ， 可 以 由 这 些 网 页 生成 一 个 站 点 ， 便 于 以 后 统一 管 

从 这 里 也 可 以 看 出 站 点 的 概念 同文 档 不 同 。 但 是 站 点 则 是 新 
创建 的 ， 换 人 句 话 说 ， 站 点 只 是 文档 的 组 织 形式 。 


3.4 ”管理 站 所 


在 Dreamweaver CS6 中 可 以 对 本 地 站 点 进行 多 方面 管理 。 如 打开 、 编辑 、 删除 和 复制 。 
3.4.1 打开 本 地 站 点 


执行 “窗口 ”| “文件 ”命令 ， 打 开 文 件 管理 面板 ， 如 图 3-11 所 示 。 单 击 左边 的 下 
拉 列 表 可 以 选择 已 创建 的 站 点 ， 如 图 3-12 所 示 。 


sf 


BB ebuy x| 本 地 视图 ”|| 


OO | 同 


图 3-11 文件 管理 面板 图 3-12 ”选择 站 点 


3.4. 2 编辑 站 点 

在 创建 了 站 点 之 后 ， 还 可 以 对 站 点 属性 进行 编辑 。 其 方法 是 : 

(1) 执行 “站 点 ”| “管理 站 点 ”命令 ， 弹 出 站 点 管理 对 话 框 。 

(2) 选择 需要 编辑 的 站 点 ， 单 击 “ 编 辑 当前 选 定 的 站 点 ”按钮 | 各 |， 弹 出 站 点 定义 对 
话 框 , 重新 设置 站 点 的 属性 。 编辑 站 点 时 弹出 的 对 话 框 和 创建 站 点 时 弹出 的 对 话 框 完 全 一 
样 。 
3.4.3 删除 站 点 

如 果 不 再 需要 利用 Dreamweaver CS6 对 某 个 本 地 站 点 进行 操作 , 可 以 将 它 从 站 点 列表 
中 删除 ， 删 除 站 点 步骤 如 下 : 
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(1) 执行 “站 点 ”| “ 管理 站 点 ”命令 ， 弹 出 站 点 jm 


管理 对 话 框 。 要 际 寺 中 的 让 点 名? 
(2) 选择 需要 删除 的 站 点 ， 单 击 “删除 当前 选 定 的 一 一 一 
站 点 ”按钮 己 |， 弹 出 提示 对 话 框 ， 如 图 3-13 所 示 。 
(3) 单 击 “ 是 ”， 完 成 站 点 删除 。 图 3-13 ”提示 对 话 框 
站 到 
提示: 


删除 站 点 实际 上 只 是 删除 了 Dreamweaver CS6 同 该 本 地 站 点 之 间 的 关系 。 
但 是 实际 的 本 地 站 点 内 容 ,， 包括 文件 夹 和 文档 等 ， 都 仍然 保存 在 磁盘 相应 的 位 置 上 。 可 以 
重新 创建 指向 其 位 置 的 新 站 点 ， 并 进行 管理 。 


3.4.4 复制 站 点 


有 了 时候 希望 创建 多 个 结构 相同 或 类 似 的 站 点 , 这 时 可 以 利用 站 点 的 复制 特性 。 首先 从 
一 个 基准 站 点 上 复制 出 多 个 站 点 , 然后 再 根据 需要 分 别 对 各 站 点 进行 编辑 ， 这 能 够 极 大 地 
提高 工作 效率 。 要 复制 站 点 ， 执 行 以 下 步 又; 

(1) 执行 “站 点 ”| “管理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 。 

(2) 选择 需要 复制 的 站 点 ， 单 击 “ 复 制 当前 选 定 的 站 点 ”按钮 [ 同 ， 即 可 将 该 站 点 复 
制 。 复制 出 的 站 点 名 称 会 出 现在 站 点 管理 对 话 框 的 站 点 列表 中 ,名字 采 用 原 站 点 名 称 后 添 
加 “复制 ”字样 的 形式 ， 如 图 3-14 所 示 。 


图 3-14 复制 站 点 cafe 


3.5 ”操作 站 扣 文 件 


无 论 是 创建 空 日 的 文件 ,还 是 利用 已 有 的 文件 构建 站 氮 ， 都 可 能 需要 对 站 点 中 的 文件 
夹 或 文件 进行 操作 。 利 用 文档 窗口 ， 可 以 对 本 地 站 点 的 文件 夹 和 文件 进行 创建 、 删 除 、 移 
动 和 复制 等 操作 。 


删除 相应 的 文件 或 文件 来 


emuYyenvyar (LA 让 文 役 每 准 窒 创 息 老 
3.5.1 创建 文件 /文件 夹 


(1) 执行 “窗口 ”| “文件 ”命令 ， 打 开 文 件 管理 面板 。 

(2) 单 击 站 点 下 拉 列 表 选 择 需 要 的 站 点 。 

(3) 单 击 文件 管理 面板 右上 角 的 选项 菜单 按钮 轩 , 弹出 图 3-15 所 示 的 下 拉 菜 单 ， 执 
行 “ 文 件 ”|“ 新 建文 件 ”或 “新 建文 件 夹 ”命令 新 建 一 个 文件 或 文件 夹 。 

(4) 单 击 新 建 的 文件 或 文件 夹 名 称 ， 使 其 名 称 区 域 处 于 编辑 状态 ， 然 后 输入 文件 文 
件 夹 名 称 ， 如 图 3-16 所 示 。 


3.5.2 删除 文件 或 文件 夹 


(1) 执行 “窗口 ”| “文件 ”命令 ， 打 开 文 件 管理 面板 。 

(2) 单 击 站 点 下 拉 列 表 选 择 需 要 的 站 点 。 

(3) 选中 要 删除 的 文件 或 文件 夹 。 

(4) 按 Delete 键 ， 系 统 出 现 一 个 “提示 ”对 话 框 ， 问 是 否 真正 要 删除 文件 或 文件 夹 ， 
如 图 3-17 所 示 。 


新 建立 件 0) Ctrl+Shift+H EC 
新 建 恕 件 夹 他 ) Ctrl+thlt+Shift+H 编 辐 证 ) 


日 轧 站 点 - test (Ci:\... 


加 images 

打开 四 2 二 

帮助 
消除 只 读 尾 性 钙 ) 

关闭 标签 蛤 Dreanyveaver ~ 
在 浏览 器 中 预览 pp) » 2 您 确认 要 册 除 所 选 立 件 吗 ? 
检查 迟 接 并 ) Shift+F8 

人 | 是 O) ET 
浏览 0).. 全 ”1! 个 本 地 项 目 被 选中 ,总 [中 志 ] 
图 3-15 弹出 式 沈 单 图 3-16 ”修改 文件 /文件 夹 名 图 3-17 提示 对 话 框 


(5) 单 击 控 钮 “是 ” 即 可 将 文件 或 文件 夹 从 本 地 站 点 中 删除 。 


与 删除 站 点 的 操作 不 同 ， 这 种 对 文件 或 文件 夹 的 删除 操作 会 从 磁盘 上 真正 


3.5.3 编辑 站 点 文件 


(1) 执行 “窗口 ”| “文件 ”命令 ， 打 开 文 件 管理 面板 。 
(2) 单 击 左边 的 下 拉 列 表 选 择 需 要 的 站 点 。 
(3) 双击 需要 编辑 的 文件 图 标 ， 即 可 在 Dreamweaver CS6 的 文档 窗口 中 打开 此 文件 
进行 编辑 。 文 件 编辑 完毕 保存 即 可 完成 本 地 站 点 中 的 文件 更 新。 
一 般 来 说 ， 可 以 首先 构建 整个 站 点 ， 同 时 在 各 个 文件 夹 中 创建 好 需要 编辑 的 文件 。 然 
后 再 在 文档 窗口 中 分 别 对 这 些 文件 进行 编辑 ， 最 终 构 建 完整 的 网 站 内 容 。 
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3.5.4 刷新 本 地 站 点 文件 列表 


如 果 在 Dreamweaver CS6 之 外 对 站 点 中 的 文件 夹 或 文件 进行 了 修改 , 则 需要 对 本 地 站 
点 文件 列表 进行 刷新 才 可 以 看 到 修改 后 的 结 末 。 

如 果 在 定义 站 点 过 程 中 选中 了 “ 目 动 刷新 本 地 文件 列表 ” 复 选 枉 ， 则 文件 列表 的 刷新 
操作 会 目 动 完成 :; 如 果 没 有 选中 该 复 选 枉 ， 则 需要 手工 刷新 文件 列表 。 刷 新 本 地 站 点 文件 
列表 执行 以 下 步骤 : 

(1) 执行 “窗口 ”| “文件 ”命令 ， 打 开 文 件 管理 面板 。 
(2) 单 击 左边 的 下 拉 列 表 选 择 需 要 的 站 点 。 
(3) 单 击 “文件 ”面板 左上 的 刷新 按钮 名 ， 即 可 对 本 地 站 点 的 文件 列表 进行 刷新 。 


3.6 存储 库 视 图 


Dreamweaver 集成 了 一 个 版 本 控制 软件 Subversion, 可 以 提供 更 健全 的 文件 版 本 控制 、 
回 深 等 的 取出 文件 / 存 回 文件 的 体验 。Dreamweaver 不 是 一 个 完整 的 SVN 客户 端 ， 却 可 
使 用 户 无 需 任何 第 三 方 工具 或 命令 行 界面 ， 获 取 文 件 的 最 新 版 本 ， 更 改 和 提交 文件 。 

Dreamweaver CS6 扩展 了 对 Subversion 的 支持 。 借 助 增强 的 Subversion 软件 支持 ， 
用 户 可 以 在 本 地 移动 、 复 制 和 删除 文件 ， 然 后 将 更 改 与 远程 SVN 存储 库 同 步 ; 使 用 新 的 
还 原 命 令 ， 可 以 快速 更 正 冲 突 或 回 退 到 以 前 版 本 的 文件 ; 此 外 ， 狐 扩展 还 允许 用 户 指 定 给 
定 项 目 中 使 用 的 Subversion 版 本 ， 提 高 协作 、 版 本 控制 环境 中 的 站 点 文件 管理 效 座 。 


Ry 注意 : 
Cy Dreamweaver (CS6 使 用 Subversion 1.6.9 客户 端 库 。 更 高 版 本 的 
Subversion 客户 端 库 不 向 后 兼容 。 如 果 读 者 更 新 第 三 方 客户 端 应 用 程序 (如 
Tortoise SVN ) 以 使 用 更 高 版 本 的 Subversion， 则 Dreamweaver 将 无 法 再 与 
Subversion 进行 通信 。 
下 面 徐 要 介绍 一 下 使 用 存储 库 视 图 时 音 用 的 一 些 操作 。 

3.6.1 建立 SVN 连接 


Subversion 是 一 种 版 本 控制 系统 。 它 使 用 户 能 够 协作 编辑 管理 远程 Web 服务 右上 
的 文件 。 由 于 Dreamweaver CS6 只 是 集成 了 Subversion 客户 融 ， 因 此 在 进行 存储 库 视 图 操 
作 之 前 ， 必 须 建立 与 SVN 服务 器 的 连接 。 

与 SVN 服务 占 的 连接 是 在 “站 点 定义 ”对 话 框 的 “版 本 控制 ”类 别 中 建立 的 。 

(1) 执行 “站 点 ”/“ 管 理 站 点 ”命令 ， 在 弹出 的 “管理 站 点 ”对 话 框 中 选中 需要 设 
置 存储 库 的 站 点 ， 然 后 单 击 “ 编 辑 ” 按 钮 打开 对 应 的 “站 点 设置 ”对 话 框 。 

(2) 在 “站 点 设置 ”对 话 框 中 单 击 “版 本 控制 ”选项 卡 。 

(3) 在 对 话 框 的 “访问 ”下 拉 有 表单 中 选择 “Subversion”， 显示 图 3-18 所 示 的 对 话 框 。 
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服务 器 地 址 ， 
存 情 库 路 径 ， 


服务 器 端口 ， 
用 记名 ， 
密码 ; 


图 3-18 设置 访问 选项 
开始 此 设置 之 前 ， 必 须 获 得 对 SVN 服务 器 和 SVN 存储 库 的 访问 权限 。 有 关 SVN 
的 详细 信息 ， 请 访问 Subversion 网 站 ， 网 址 : http://subversion .tigris.ors/。 
(4) 在 “协议 ”下 拉 列 表 中 选择 协议 。 可 选 协议 包括 HTTP、HTTPS、SVN 和 
SVN+SSH。 


Ry 注意 : 


2 使 用 SVN+SSH 协议 要 求 具备 特 殊 配 置 。 有 关 详 细 信 息 ， 请 访问 

www. adobe. com/go/learn_dw_svn_ssh_cn., 

(5) 在 “服务 器 地 址 ”文本 框 中 输入 SVN 服务 器 的 地 址 。 通 常 形式 为 ， 服务 器 名 
称 . 域 .com。 

(6) 在 “存储 库 路 径 ” 文 本 框 中 键入 SVN 服务 器 上 存储 库 的 路 径 。 其 形式 通常 类 
似 于 : /svn/your_root_directory，SVN 存储 库 根 文件 夹 的 命名 由 服务 右 管 理 员 确 定 。 

(7) 如 条 硕 望 使 用 的 服务 器 靖 口 不 同 于 默认 服务 器 病 口 ， 则 在 “服务 器 痛 口 ”区 域 
选择 “ 非 默 认 值 ”， 并 在 文本 框 中 输入 交口 写 。 人 否则 保留 默认 设置 。 

(8) 在“ 用户 名 ”和 “密码 ”文本 框 中 分 别 输入 SVN 服务 占 的 用 户 名 和 密码。 

(9) 设置 完毕 之 后 ， 单 击 “ 测 试 ” 投 钮 测试 连接 。 然 后 单 击 “ 确 定 ” 按 钮 关闭 对 话 
框 。 

与 SVN 服务 吉 建 立 连 接 后 即 可 在 “文件 ”面板 中 奉 看 SVN 存储 库 。 


3.6.2 获取 最 新 版 本 的 文件 

从 SVN 存储 库 中 获取 最 新 版 本 的 文件 时 , Dreamweaver 会 将 该 文件 的 内 容 和 其 相应 
本 地 副本 的 内 容 进 行 合并 。 也 束 是 说 ， 如 果 上 次 提交 文件 后 ， 有 其 他 用 户 更 新 了 该 文件 ， 
这 些 更 新 将 合并 到 计算 机 上 的 本 地 厂 本 文件 中 。 如 果 本 地 人 硬 生 上 不 存在 此 文件 ， 
Dreamweaver 会 直接 获取 该 文件 。 
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注意 : 

马 首次 从 存储 库 中 获取 文件 时 ， 应 使 用 本 地 空 目录 ,或 使 用 所 含 文件 与 存储 

库 中 文件 不 同名 的 本 地 目录 。 如 果 本 地 驱动 器 包含 的 文件 与 远程 存储 库 中 的 文件 同 

名 ，Dreamweaver 不 会 在 第 一 次 尝试 时 ， 便 将 存储 库 文 件 装 入 本 地 驱动 器 。 

获取 最 新 版 本 的 文件 的 具体 步骤 如 下 : 

(1) 确保 已 成 功 建 这 SVN 连接 。 

(2) 在 “文件 ”面板 的 视图 下 拉 列 表 中 选择 “本 地 视图 ”， 然后 在 文件 列表 中 右键 单 
击 所 需 文件 或 文件 夹 ， 并 在 弹出 的 快捷 菜单 中 选择 “版 本 控制 ”/“ 获 取 最 新 版 本 ”命令 。 


。 提示: 狼 取 最 新 版 本 ,还 可 以 右键 单 击 文件， 然后 从 上 下 文 菜单 中 选择 “取出 ” 
命令 ， 或 者 选择 文件 并 单 击 “取出 ”按钮 ， 但 由 于 SVN 不 支持 取出 工作 流程 ， 所 以 此 动 
| 作 并 不 是 传统 意义 上 的 实际 取出 文件 。 


3. 6.3 提交 文件 


对 网 站 文件 进行 修改 之 后 ， 可 将 其 提交 到 SVN， 步 骤 如 下 : 
(1) 建立 SVN 连接 。 
(2) 在 “文件 ”面板 的 “视图 ”列表 中 选择 “存储 库 视 图 ”然后 在 文件 列表 中 右键 
单 击 要 提交 的 文件 ， 并 从 弹出 的 上 下 文 菜 单 中 选择 “ 存 回 ”命令 。 
读者 也 可 以 在 “本 地 视图 ”中 右键 单 击 要 提交 的 文件 ， 然 后 从 弹出 的 上 下 文 玉 单 中 选 


择 “ 存 回 ” 命 令 。 


2 提示 :在 文件。 面板 的 文件 列表 中 ,文件 上 的 绿色 选中 标记 表示 此 文件 有 更 改 ， 
但 尚未 提交 到 存储 库 . 


3. 6.4 更 新 文件 或 文件 夹 的 SVN 状态 


获取 或 提交 文件 之 后 ， 读 者 可 以 更 狐 蛙 个 文件 或 文件 夹 的 SVN 状态 。 此 更 新 操作 不 
会 刷新 整个 显示 。 操 作 步 又 如 下 : 

(1) 确保 已 成 功 建立 SVN 连接 。 

(2) 在 “文件 ”面板 的 “视图 ”下 拉 列 表 中 选择 “存储 库 视 图 ”或 “本 地 视图 ”。 

(3) 在 显示 的 文件 列表 中 右键 单 击 存 储 库 或 本 地 文件 中 的 任 一 文件 夹 或 文件 ， 然 后 
从 弹出 的 上 下 文 来 单 中 选择 “更 新 状态 ” 即 可 更 新 存储 库 或 本 地 文件 /文件 夹 的 SVN 状 


A 


心 \o 


3. 6.5 人 锁定 和 解锁 文件 

由 于 存储 库 的 文件 可 能 会 在 同一 时 间 被 一 个 或 多 个 小 组 成 员 访 问 或 修改 , 为 避免 修改 
文件 时 其 他 小 组 成 员 访 问 该 文件 ,可 以 锁定 文件 。 通 过 锁定 SVN 存储 库 中 的 文件 ， 可 以 
让 其 他 用 户 知道 该 文件 正在 处 理 。 此 时 ， 其 他 用 户 仍 可 在 本 地 编辑 文件 ,但 必须 等 到 该 文 
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Var (FAXBT 文 阴 款 准 实 创 起 诊 
件 解锁 后 ， 才 可 提交 该 文件 。 在 存储 库 中 锁定 文件 时 ， de 个 开锁 图 标 ， 其 
他 用 户 会 看 到 完全 锁定 的 图 标 。 锁 定 和 解锁 文件 的 操作 步骤 如 下 : 
(1) 确保 已 成 功 建立 SVN 连接 。 
(2) 在 “文件 ”面板 的 “视图 ”下 拉 列 表 中 选择 “存储 库 视 图 ”或 “本 地 视图 ”。 
(3) 在 显示 的 文件 列表 中 右键 单 击 存储 库 或 本 地 文件 中 所 需 的 文件 ， 然 后 从 弹出 的 
上 下 文 这 单 中 选择 “锁定 ”或 “解锁 ”命令 。 


3. 0. 6 回 存 储 库 ;未 加 | 新 文件 


如 有 条 硕 望 将 一 个 新 文件 添加 到 存储 库 ， 可 以 执行 以 下 操作 : 

(1) 确保 已 成 功 建立 SVN 连接 。 

(2) 在 “文件 ”面板 的 文件 列表 中 选择 要 添加 到 存储 库 中 的 文件 ， 单 击 右键 从 弹出 
的 快捷 玉音 中 选择 “ 存 回 ”命令 。 

(3) 确保 选择 要 提交 的 文件 已 位 于 “提交 ”对 话 杠 中， 然后 单 击 “确定 ”按钮 。 


可 


3.6.7 解析 冲突 的 文件 


如 果 文 件 与 服务 器 上 其 他 文件 冲突 ， 可 以 编辑 文件 ， 然 后 将 其 标记 为 已 解析 。 例 如 ， 
如 果 和 尝试 存 回 的 文件 与 其 他 用 户 的 更 改 有 冲突 ，SVN 将 不 允许 提交 文件 。 此 时 ， 可 以 从 
存储 库 中 获取 该 文件 的 最 新 版 本 ,手动 更 改 工作 副本 ,然后 将 文件 标记 为 已 解析 ， 这 样 就 
可 以 提交 了 。 

解析 证 突 的 文件 的 具体 操作 步骤 如 下 : 

(1) 确保 已 成 功 建立 SVN 连接 。 

(2) 在 “文件 ”面板 的 “视图 ”下 拉 列 表 中 选择 “本 地 视图 ”。 

(3) 在 显示 的 文件 列表 中 右键 单 击 要 解析 的 文件 ， 然 后 从 弹出 的 上 下 文 来 单 中 选择 
“版 本 控制 ”/“ 标 记 为 已 解析 ”命令 。 


3.7 动手 练 一 练 


1. 启动 Dreamweaver CS6 在 本 机 上 创建 一 个 站 点 。 
2. 建立 SVN 连接 ， 并 使 用 存储 库 视 图 的 各 项 功能 


3.8 思考 题 


1. 本 地 站 扣 和 远程 站 点 的 区 别 是 什么 ?为 什么 要 建立 本 地 站 点? 
2. 删除 熙 点 和 删除 站 点 文件 的 效果 有 何不 同 ? 
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第 4 章 文革 与 起 链接 


cl 
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\ 本 章 将 介绍 文本 与 超级 链接 的 基本 知识 及 使 用 方法 。 内 容 包括 : 添加 普 
， 通 文本 、 插 入 特殊 符号 和 插入 日 期 的 方法 ; 对 文本 的 格式 设置 ; 三 种 超级 链 ， 
， 接 的 概念 与 功能 ; 创建 各 种 超级 链接 的 方法 ， 包 括 使 用 属性 面板 创建 链接 、: 

， 链 接 到 文档 中 指定 位 置 、 创 建 指向 E-mail 地 址 链接 等 。 


| 
| WwW 


Adobe Dreamweaver i™6 


图 插入 普通 文本 

图 ”插入 特殊 符号 和 日 期 
| @ 创建 超 链接 

图 虚拟 链接 与 脚本 链接 
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4.1 添加 网 页 文本 


文字 是 最 重要 的 传递 信息 的 尹 介 。 一 般 而 言 ， 网 页 上 的 信息 大 多 都 是 通过 文字 来 表达 


的 ， 筷 们 通过 不 同 的 排版 方式 、 不 同 的 设计 风格 排列 在 网 页 上 ， 提 供 丰 晶 的 信息 。 在 制作 
网 页 的 时 候 ， 文 本 的 创建 与 编辑 占 了 制作 工作 的 很 大 部 分 。 能 否 对 各 种 文本 控制 手段 运用 
自如 ， 是 决定 网 页 设计 是 否 美 观 和 军 有 创意 以 及 提高 工作 效率 的 关键 。 下 面 癌 大 家 介绍 
Dreamweaver CS6 提供 的 多 种 同文 档 中 添加 文本 和 设置 文本 格式 的 方法 。 


4.1.1 添加 普通 文本 


在 Dreamweaver CS6 中 输入 文本 同 普通 的 文本 处 理 软件 次 似 , 多 种 方法 可 以 将 文本 湛 
加 到 Dreamweaver 文档 。 可 以 直接 在 Dreamweaver 文档 窗口 中 键入 文本 ， 也 可 以 从 其 他 
文档 中 胡 切 并 粘贴 或 导入 文本 ， 或 从 其 他 应 用 程序 拖 放 文本 。Web 专业 人 员 接 收 的 、 包 
含 需要 合并 到 Web 页 面 的 文本 内 容 的 典型 文档 类 型 有 ASCIL 文本 件 、RTF 文件 和 
Microsoft Office 文档 。Dreamweaver 可 以 从 这 些 文档 类 型 中 的 任何 一 种 取出 文本 ,然后 将 
文本 并 入 Web 页 面 中 。 奉 要 将 文本 添加 到 文档 ， 执 行 下 列 操 作 之 一 : 

令 ”直接 在 文档 窗口 中 键入 文本 。 

令 ”从 其 他 应 用 程序 中 复制 文本 ,切换 到 Dreamweaver， 将 插入 点 定位 在 文档 窗口 的 

设计 视图 中 ， 然 后 执行 “编辑 ”| “粘贴 ”或 “选择 性 粘贴 ”等 命令 。 

倒 ”利用 Dreamweaver CS6 的 粘贴 选项 ， 可 以 保留 所 有 源 格 式 设置 ， 也 可 以 只 精 贴 
文本 ， 还 可 以 指定 粘贴 文本 的 方式 。 此 外 ， 当 使 用 “粘贴 ”命令 从 其 他 应 用 程序 
粘贴 文本 时 ， 可 以 将 粘贴 首选 参数 设置 为 默认 选项 。 

令 ”从 其 他 文档 导入 文本 〈 如 Microsoft Excel 文件 或 数据 库 文件 ) 。 导 入 表格 式 数据 
将 在 第 6 章 详细 讲述 。 


4.1.2 插入 特殊 符号 


一 般 来 说 ， 在 HTML 中 一 个 特殊 字符 有 两 种 表达 方式 : 一 种 称 作 数字 参考 ， 另 一 种 
称 作 实体 参考 。 所 谓 数字 参考 ， 了 吏 是 用 数字 来 表示 文档 中 的 特殊 字符 ， 通 利 由 前缀 “&#” 
加 上 数值 再 加 上 后 级 “;” 组 成 ， 其 表达 方式 为 : &#D;， 其 中 DD 是 一 个 十 进 制 数 值 。 所 谓 
实体 参考 ， 实 际 上 束 是 用 有 意义 的 名 称 来 表示 特殊 字符 ， 通 第 由 前 级 “&”， 加 上 和 字符 对 
应 的 名 称 再 加 上 后 级 “;” 组 成 。 其 表达 方式 为 : &name; ， 其 中 name 是 一 个 用 于 表示 子 
从 的 名 称 ， 它 是 区 分 大 小 写 的 。 

例如 ,可 以 使 用 “&#169” 和 “&copy;” 来 表示 版 权 符 写 “©”， 用 “&#174;” 和 “&reg;” 
来 表示 注册 商标 符号 “@@” 很 显然 ， 这 比 数 字 要 容易 记忆 得 多 。 

壮 憾 的 是 , 不 是 所 有 的 浏览 器 都 能 够 正确 认 出 采用 实体 参考 方式 的 特殊 字 竹 , 但 是 它 
们 都 能 够 识别 出 采用 数字 参考 方式 的 特殊 字符 。 如 果 可 能 ， 对 于 一 些 特别 不 香 见 的 字符 应 
该 使 用 数字 参考 方式 。 

当然 对 于 那些 第 见 的 特殊 字符 ， 使 用 其 实体 参考 方式 是 安全 的 。 在 实际 应 用 中 ， 只 要 
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记 住 这 些 各 用 特殊 字符 的 实体 参考 殉 足 够 使 用 了 。 
表 4-1 显示 了 一 坚毅 用 字符 的 实体 参考 和 数字 参考 。 
表 4-1 常用 的 字符 及 其 参考 
字符 实体 参考 字符 数字 参考 显示 
&nbsp; (空格 ) 
人 必 COpYy; 
人 reg; 
&trade: 
pound; 
Keuro; 
Kyen; 
&cent; 
Ksect: 
&lt; 
Qot; 
Qamp; 
Kiquot; 
times; 
&plusmn; 
&middot 


RV 人 ORrRO 38®@Q 


= 


”| xX 


尽管 记忆 字符 的 参考 非常 不 易 , 但 是 在 Dreamweaver 中 ,搬入 特殊 字符 却 变 得 非常 简 
单 。Dreamweaver 在 “搬入 ”面板 的 “文本 ”面板 上 专门 设置 了 向 见 的 特殊 字符 投 钮 ， 上 只 
需要 单 击 上 面 的 按钮 ， 即 可 完成 特殊 字符 的 输入 。 切 换 到 “文本 ”插入 面板 ， 并 单 击 特殊 
字符 下 拉 第 头 后 ， 束 可 以 看 到 Dreamweaver 目 市 的 特殊 字符 ， 如 网 4-1 所 示 。 

下 面 通过 插入 两 个 特殊 字符 “3$” 和 “@ ”的 示例 ， 来 泗 示 插入 特殊 字符 的 具体 步骤 。 
插入 后 的 效果 如 图 4-2 所 示 。 本 例 执行 以 下 操作 : 


插入 | 数据 | 乡 害 服务 | Busi | 呈 | 
WT 
li ”列表 项 村 
dl ”定义 列表 
dt 定 尺 术语 
dd ”定义 说 明 
abbr ”缩写 
Wac ” 首 字母 缩写 词 
加 | -字符 : 其 他 字符 国 
好] 换 行 符 (Shift + Enter) 击 mtitlea-l Crmy EEC 
也 不 执行 空格 | vv  、 。， ， rn 国 
5 右 引号 “8” 和 EE 
一 破 折线 在 Dreamweaver CSs 重 中 办 六 妇 韦 同音 通 鸭 交友 处 理 软件 
一 短 破 折 北 迷 似 ， 多 种 方法 可 以 将 女 本 评 加 到 Dreatmweaver 允 档 。 可 以 直 = 
接 在 Dreamweavef 交 档 窗 口中 键入 文本 ， 世 可 以 从 其 他 文档 中 
上 英镑 符号 甬 切 并 粘贴 或 导入 文本 ， 或 从 其 他 应 用 程序 拖 放 文本 。 柚 eb 
氟 欧元 符号 专业 人 员 接 收 的 、 包 含 需 要 合并 到 Web 页 面 的 文本 内 容 的 典 一 
羊 日 元 符号 型 文档 类 型 有 ASCIIT 交 本 件 、RTF 文件 和 Ricrosof Offce 文 
人 @ 版 权 档 。TDreatmywwreayerf 可 以 从 这 些 女 档 类 型 中 的 任何 一 种 取出 文本 
ee ， 然 后 将 文本 并 入 Web 页 面 中 。 若 要 将 文本 添加 到 文档 ， 请 
®: 各 行 下 列 操作 之 一 ， 
直接 在 文档 窗口 中 键入 文本 。 下 
并 其 他 字符 <body> <p> RA v 本国 男生 区 
图 4-1 字符 面板 图 4-2 ”插入 特殊 字符 效果 
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01 输入 网 页 中 的 普通 文本 。 

02 在 文档 中 将 光标 放置 在 需要 插入 特殊 字符 的 位 置 ( 此 时 将 光标 放 在 数字 “4.1.1?” 
的 前 面 )。 切 换 到 “插入 ”/“ 文 本 ”面板 ， 打 开 特 殊 字 符 弹 出 染 单 。 单 击 “ 其 他 字符 ” 按 
钮 图 . 

03 在 弹出 的 对 话 框 中 ， 选 择 所 要 插入 的 字符 “8 ”。 对话 框 中 的 “插入 ”文本 框 将 
显示 该 字符 的 代码 ， 如 图 4-3 所 示 。 


图 4-3 “插入 其 他 字符 ”对 话 杠 


04. 单 击 “ 插 入 其 他 字符 ”对 话 框 中 的 “确定 ”按钮 ， 符 号 就 插 到 “4.1.1” 前 面 了 。 

03， 用 同样 的 方法 在 Dreamweaver CS6 后 面 插入 符号 @。 

06 对 于 特殊 字符 ， 也 可 以 使 用 属性 面板 对 其 属性 进行 设置 。 选 取 文 档 中 的 “2? 
学 符 ， 此 时 属性 面板 中 的 各 项 属性 同一 般 文 本 的 属性 相同 。 在 面板 中 ， 将 字体 “大 小 ” 设 
置 为 2。 此 时 束 得 到 图 4-2 显示 的 效果 。 

男 外 对 于 特殊 字符 弹出 亲 蛙 中 已 有 的 特殊 字符 , 只 要 单 击 荣 单 上 的 字符 残 可 以 插入 所 
选 的 字符 了 。 文 档 中 所 插入 的 特殊 字符 在 设计 视图 和 代码 视图 中 显示 是 不 同 的 , 在 设计 视 
图 中 显示 的 即 为 所 输入 的 字符 ， 而 在 代码 视 图 中 显示 的 则 是 特殊 字符 的 代码 。 例 如 ， 读 者 
输入 了 特殊 字符 “$$”, 在 代码 视图 中 显示 的 是 “&sect”， 特殊 字符“®@” 的 代 公 是 “&reg;”。 

在 特殊 字符 菜单 中 还 包括 了 锣 换 行 符 和 此 非 间 断 空格 符 。 

1. 换行 符 

一 个 文本 中 通 第 包括 了 多 个 段 洲 ,， 一 般 情 况 下 段 沙 不 能 在 一 行 中 得 到 完全 显示 ， 而 是 
由 多 行文 学 组 成 。 在 Dreamweaver 中 , 文本 具有 目 动 换行 功能 , 即 文 本 可 以 目 动 多 行 显示 ， 
但 是 日 动 换 行 必 须 是 在 文本 一 行 结束 的 时 候 才 能 够 进行 。 在 段 沙 结 束 的 时 候 ， 可 以 通过 
Enter 键 实现 换行 的 目的 。 但 是 如 果 要 在 段落 中 实现 强制 换行 的 同时 不 改变 段落 的 结构 ， 
束 必 须 插入 换行 件 。 在 HIML 代码 中 ， 段 落 换行 对 应 的 标签 是 sp> 和 </p>， 而 换行 符 的 标 
签 是 <br>。 奉 要 搬入 换行 ， 请 执行 下 列 操 作 之 一 : 

令 ” 百 接 按 Enter〈 回 车 ) 键 段 洲 换 行 。 

争 “ 单 击 “ 文 本 ”面板 中 按钮 喝 。 

令 ”执行 “插入 |[HTML| 特 殊 字 符 | 换行 符 ” 命 令 。 
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令 按 Shift+Enter 键 。 
令 ”在 代码 视图 中 相应 位 置 输入 代 公 “<br>”。 
插入 换行 符 换 行 和 直接 Enter〈 回 车 ) 换行 在 浏览 器 视图 中 的 区 别 在 图 4-4 体现 。 


春日 
ee 胜 日 寻 芳 泗 术 食 
胜 日 如 苟 徊 水 食 
无 边 范 景 一 时 新 无 边 光景 一 时 新 
等 闲 识 得 东 风 面 
万 柴 千 红 总 是 春 等 闲 识 得 东风 面 
万 柴 千 红 总 是 春 


图 4-4 不 同 换行 方式 在 浏览 硕 中 的 显示 


2， 插 入 非 间 断 空格 

HTML 只 允许 字符 之 间 包 含 一 个 空格 。 若 要 在 文档 中 添加 其 他 空格 , 必须 插入 连续 空 
格 。 可 以 设置 一 个 在 文档 中 自动 添加 连续 空格 的 参数 选择 。 若 要 设置 此 参数 选择 , 执行 “ 纺 
辑 ”| “首选 参数 ”命令 ,然后 在 “常规 ”中 确保 选中 “允许 多 个 连续 的 空格 ”， 如 图 4-5 
所 示 。 


文档 选项 : [y] 显示 欢迎 屏幕 G) 
加 自动 时 重新 打开 文档 名 ) 
打开 只 读 文件 时 警 周 用 户 0%) 
启用 相关 文件 吕 ) 
搜索 动态 相关 文件 加 ): 手动 ~ 
移动 文件 时 更 新 链接 (): | 提示 忌 
冬 各 回 插 入 对 象 时 显示 对 话 框 I) 
立 件 类 型 / 编辑 器 回 区 许 戏 宇 节 内 联 输入 叫 ) 
在 浏览 晶 中 预览 标题 后 切换 到 普通 段落 心 ) 
> 
办 用 《strong》 和 <em> 代替 人 > 和 <>) 
回 在 > 或 4h1<h6> 标签 中 放置 可 编辑 区 域 时 发 出 警 肯 
历史 步骤 最 多 次 数 0): |50 | 
拼写 字典 @): | 


图 4-5 “首选 参数 ”对 话 框 


各 要 插入 连续 空格 ， 请 执行 下 列 操作 之 一 : 
令 和 甲 击 “文本 ”面板 中 特殊 学 符 下 拉 琳 单 中 的 插入 空格 按钮 访 时 ,会 弹出 “提示 ” 
对 话 框 。 

令 执行 “插入 ”|“HTML”|“ 特 殊 字 符 ”|“ 不 换行 空格 ”命令 。 

令 按 Ctr+Shift+ 空格 键 。 

令 ”在 代码 视图 中 相应 位 置 输入 “&nbsp”。 

单 击 “文本 ”面板 中 特殊 字符 下 拉 沫 单 中 的 插入 空格 按钮 本 时 会 弹出 提示 对 话 框 ， 
提示 特殊 字符 可 能 在 有 些 浏览 器 无 法 显示 。 欠 选中 “以 后 不 再 显示 ” 复 选 杠 ， 则 下 次 插入 
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非 间 断 空格 时 不 再 出 现 此 对 话 框 。 
4. 1.3 查找 和 符 换 文本 


可 以 在 当前 文档 、 所 选 文件 、 目 录 或 整个 站 点 中 搜索 文本 、 由 特定 标签 环绕 的 文本 、 
HTML 标签 和 属性 。 可 以 使 用 不 同 的 命令 搜索 文件 ， 以 及 搜索 文件 中 的 文本 和 /或 HTML 
标签 。 奏 找 和 蔡 换 文本 的 步骤 如 下 : 

(1) 执行 “编辑 ”| “和 奉 找 和 替换 ”命令 打开 “和 奏 找 和 符 换 ”对 话 框 ， 如 岁 4-6 所 
不 。 


查找 范围 0 : | 当前 文档 v 无 标题 文档 
搜索 @): | 文本 图 
查找 器 ): | 


车 换 F): | 


| 
选项 : 器 区 分 大 小 写 (5) 算 略 空白 红 ) 
器 全 字 匹 配 癌 ) 器 ] 使 用 正则 表达 式 上 ) 


图 4-6 “和 奉 找 和 符 换 ” 对 话 杠 


(2) 在 出 现 的 查找 和 符 换 对 话 框 中 ， 使 用 “得 找 范 围 ” 选 项 指定 要 搜索 的 文件 ， 在 
下拉 列表 框 中 有 如 下 选项 : 
“当前 文档 ”: 将 搜索 范围 限制 在 活动 文本 中 。 
“上 所 选 文字 ”: 将 搜索 范围 限定 为 活动 文档 中 当前 选 定 的 文本 。 
“打开 的 文档 ”: 将 搜索 范围 限制 在 打开 的 文档 中 。 
“文件 夹 ...”; 将 搜索 范围 限制 在 特定 的 文件 夹 。 选 择 文件 夹 后 ， 单 击 文件 夹 图 
标 浏览 并 选择 要 搜索 的 目录 。 
全 “站 点 中 选 定 的 文件 ”: 将 搜索 范围 限制 在 “文件 ”面板 中 当前 选 定 的 文件 和 文 
件 夹 。 只 有 在 文件 面板 处 于 活动 状态 (即位 于 文档 窗口 的 前 面 ) 时 选择 执行 查找 
和 替换 命令 时 ， 该 选项 才 可 用 。 
令 “整个 当前 本 地 站 点 ”: 将 搜索 苑 围 扩 展 到 当前 站 点 中 的 所 有 HTML 文档 、 库 
文件 和 文本 文档 。 选 择 整个 当前 本 地 站 点 后 ， 当 前 站 点 的 名 称 出 现在 弹出 荣 单 的 
右 侧 。 如 果 这 不 是 要 搜索 的 站 点 ， 请 从 站 点 面板 的 当前 站 点 弹出 菜单 中 选择 一 个 
不 同 的 站 点 。 
(3) 在 “搜索 ”下 拉 列 表 框 中 选择 要 执行 的 搜索 类 型 ， 下 拉 列 表 框 中 各 选项 功能 介 
绍 如 下 : 
令 “ 源 代码 ”: 可 以 在 HTML 源 代码 中 搜索 特定 的 文本 字符 串 。 
令 “文本 ”: 可 以 在 文档 的 文本 中 搜索 特定 的 文本 字符 串 。 
争 “文本 (局 级 ) ”: 可 以 搜索 在 标签 内 或 者 不 在 标签 内 的 特定 文本 字符 串 。 
令 “特定 标签 ”: 可 以 搜索 特定 的 标签 、 属 性 和 属性 值 。 


人 2@@ 人 


00 


六 


注意 : 


2 按 Ctrl + Enter 键 或 Shift + Enter 键 可 以 在 文本 搜索 字段 中 添加 换行 


符 ， 


从 而 搜索 回 车 符 。 执 行 此 类 搜索 时 ， 如 果 不 使 用 正则 表达 式 ， 则 请 取消 选择 “ 忽 


略 空白 ”选项 。 此 搜索 专门 查找 回 车 符 ， 而 不 是 仅 查 找 换行 符 匹配 项 ; 例如， 它 不 查 
找 <br> 标 签 或 cp 标签 。 回 车 符 在 “设计 ”视图 中 显示 为 空格 而 不 是 换行 符 ， 
(4) 在 “查找 ”文本 框 输入 要 查找 的 内 容 。 
(5) 在 “替换 ”文本 框 输入 要 替换 的 内 容 。 如 果 只 是 查找 ， 则 不 要 在 蔡 换 文本 框 输 
入 任何 内 容 。 
(6) 使 用 下 列 选 项 扩展 或 限制 搜索 范围 


4 
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“区 分 大 小 写 ”: 将 搜索 范围 限制 在 与 要 得 找 的 文本 的 大 小 写 完 全 匹配 的 文本 。 
例如 ， 搜 索 the white cat 时 不 会 找到 The white cat。 

“忽略 空白 ”: 将 所 有 空 日 视 为 单个 空格 以 便 进行 下 配 。 例 如 ， 选 择 该 选项 后 ， 
the white cat 与 the ”white cat [外 配 , 但 不 与 the white c at 匹配 。 如 末 选 择 了 “使 
用 正则 表达 式 ” 选 项 ， 则 该 选项 不 可 用 ， 必 须 显 式 编写 正则 表达 式 以 忽略 空白。 
注意 ，<p> 和 <br> 标 签 不 算 作 空白 。 

“全 字 匹 配 ”: 将 搜索 苑 围 限 制 在 囊 配 一 个 或 多 个 完整 单词 的 文本 。 使 用 此 选项 
与 通过 正则 表达 式 搜索 以 \b“〈 词 边界 正则 表达 式 ) 开始 和 结束 的 字符 串 效 果 相 
同 。 

“使 用 正则 表达 式 ”: 选项 使 搜索 宇 符 串 中 的 特定 字符 和 短 宇 符 串 《〈 如 ?、*#、Nw 
和 \b) 被 解释 为 正则 表达 式 运 算 和 从 。 例 如 ， 对 the * cat 的 查找 与 the white cat 和 
the black cat 都 匹配 。 


下 全 二 二 


提 本 :如果 在 代码 视图 中 工作 并 对 文档 进行 了 更 改 ， 然 后 试图 查找 和 替换 源 代码 


以 外 的 任何 内 容 ， 这 时 会 出 现 一 个 对 话 框 ， 提 示 Dreamweaver 正在 同步 两 个 视图 然后 再 进 ， 
行 搜索 。 


功能 ， 


4.1.4 插入 日 期 


在 网 页 中 ,经 常会 看 到 显示 有 上 日期。 在 Dreamweaver 中 为 该 者 提供 了 一 个 插入 月 期 的 


使 用 它 可 以 用 任意 格式 在 文档 中 插入 当前 时 间 ， 同 时 还 可 以 进行 日 期 更 新 。 在 文档 


中 插入 日 期 最 终 的 效果 如 图 4-7 所 示 。 
插入 日 期 的 步骤 如 下 : 
(1) 将 插入 点 放 在 文档 中 需要 插入 日 期 的 位 置 。 
(2) 切换 “插入 ”面板 中 的 “常用 ”面板 。 
(3) 单 击 “ 日 期 “按钮 名， 此 时 出 现 “插入 日 期 ”对 话 框 ， 如 图 4-8 所 示 。 在 对 话 


框 中 可 以 选择 星期 、 日 期 、 时间 的 显示 方式 。 如 果 读 者 希望 插入 的 日 期 在 每 次 保存 文档 时 


目 动 进行 更 新 ， 可 以 选择 对 话 框 中 “储存 时 目 动 更 独 ” 复 选 框 。 


洲 沫 砚 朵 计 寺 其 pp 溉 


CT 人 人 以 保 准 SE 9 入 谍 


| 画 - MinetpubVwwerootVtestvehedV 1 4 乌 人 辣 朋 htmi (XHTML) 


4.1.1 漆 加 普通 文本 


。 在 Dreamweaver CS6 中 输入 文本 同 普 通 的 文本 处 理 软件 类 似 ， 过 种 方法 可 以 将 文本 
只 加 到 Dyreamweave ger 文档 。 可 以 直接 在 Dreamweaver 文 档 窗口 中 尾 入 文本 ， Vi 
文档 中 前 切 并 帖 贴 或 导入 文本 ， 式 从 其 他 应 用 程序 拖 放 文本 . Web 专业 人 员 搜 此 的 
旬 言 赴 要 合并 到 Web 自 面 的 文本 内 容 的 典型 文档 类 型 有 ASCI 文 本 件 、 RTF 文件 和 
Microsoft Office 文档 。Dreamweaver 可 以 从 这 些 立 档 党 型 中 的 任何 一 ca 然后 将 
文本 并 入 .Web 页 面 中 ， no. 请 执行 下 列 操 作 之 一 

直接 在 文档 将 口 中 键 
从 其 他 应 用 程序 中 委 抽 六 本 “ 切换 到 Dreamweaver， 将 插入 点 定位 在 六 档 窗口 的 设 
Wt 然后 执行 “编辑 ” | “ 帖 贴 * 或 "选择 性 帖 贴 " 等 命令 
利用 Dreamweaver CS6 的 帖 贴 选 项 ， 可 以 保留 所 有 源 格 式 设置 ， 也 可 以 只 粘贴 立 本 
， 还 可 以 指定 帖 贴 文本 的 方式 。 此 人 外， 当 使 用 "粘贴 "命令 从 其 他 应 用 程序 粘贴 交 本 时 ， 
可 以 rr 为 默认 选项 。 
其 他 文档 导入 文本 《pxcrosof Exce[ 广 件 或 数据 库 文件 ) 。 导 入 者 格式 数据 将 
在 表格 污 术 一 章 详 细 讲 述 。 


2012-07-23 
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图 4-7 插入 日 期 


时 间 格 式 : | [不 要 时 间 ] 
”请 存 时 自动 更 新 


图 4-8 “插入 日 期 ”对 话 框 
4 是 击 “确定 ”按钮 ， 此 时 式 在 文本 中 搬入 了 当 丁 的 日 期 。 8 


党 提 记 : 插 入 日 期 对 话 框 中 显示 的 日 期 和 时 间 不 是 当前 日 期 ， 也 不 反映 访问 者 在 查 
看 站 点 时 所 看 到 的 昌 期 /时 间 ， 它 们 只 是 说 明 此 信息 显示 方 芍 示例 加 


4.2 ”设置 文本 格式 


无 论 制 作 网 页 的 目的 是 什么 ,文本 者 是 网 页 中 不 可 缺少 的 东西 。 民 好 的 文本 格式 ， 能 
够 元 分 体现 文档 要 表述 的 意图 ， 油 发 读者 的 阅读 兴趣 。 在 文档 中 构建 丰富 的 字体 、 多 种 的 
段 沙 格式 以 及 质心 避 目 的 文本 效 末 ， 对 于 一 个 专业 的 网 站 来 说 ， 是 必 不 可 少 的 要 求 乙 一 。 


4.2.1 文本 的 属性 

文本 格式 的 大 部 实现 都 可 以 通过 属性 设置 面板 进行 设置 ， 属 性 设置 面板 是 
Dreamweaver CS6 所 有 对 象 共有 的 ， 但 是 不 同 的 对 象 对 应 不 同 的 属性 设置 面板 。 

执行 “窗口 ”| “属性 ”命令 ， 出 现 属性 设置 面板 ， 如 图 4-9 所 示 。 


[ya | 本 四 无 Tv 类 | 无 MaBzr 生 注 丝 此 标题 
国 css In (I) 无 uw| 链接 红 ) sa : 
TCR 


yO i 


图 4-9 文本 属性 设置 面板 
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Dreamweaver CS6 简化 了 CSS 样式 的 工作 流程 , 用户 可 以 下 接 在 属性 面板 中 设置 、 应 
用 HTML 格式 或 层 营 样式 表 (CSS) 格式 。 应 用 HTML 格式 时 ，Dreamweaver 会 将 属性 
添加 到 页 面 正 文 的 HTML 代码 中 ; 应 用 CSS 格式 时 ，Dreamweaver 会 将 属性 写 入 文档 
头 或 单独 的 样式 表 中 。 
打开 属性 面板 之 后 ， 单 击 面板 左上 角 的 必定 按钮 ， 即 可 设置 HTML 格式 ， 如 图 4-9 
所 示 。 该 属性 设置 面板 中 各 个 选项 的 功能 如 下 : 
令 “格式 ”: 设置 所 选 文本 的 段落 样式 。 单 击 后 面 的 下 三 角 按钮 ， 从 打开 的 下 拉 列 
表 框 中 选择 一 种 格式 。 
“无 ”是 系统 的 默认 设置 ， 从 光标 所 在 行 的 左边 开始 输入 文本 ， 没 有 对 应 的 HTML 
标识 。 
“段落 ”表示 将 文本 内 容 设 置 为 一 个 段落 。 
“标题 1” 到 “标题 6” 用 于 设置 不 同 级 别 的 标题 。 
“预先 格式 化 的 ”用 于 预定 义 一 个 段落 。 使 用 该 格式 ， 可 以 在 文本 中 插入 多 个 空格 ， 
从 而 可 以 任意 调整 文本 等 内 容 的 位 置 。 
令 “ID”: 为 所 选 内 容 分 配 一 个 ID 。 如 果 已 声明 过 JPD， 则 该 下 拉 列 表 中 将 列 出 文 
档 的 所 有 未 使 用 的 已 声明 ID。 
令 “类 ”: 显示 当前 应 用 于 所 选 文本 的 样式 。 
如 末 没 有 对 上 所 选 内 容 应 用 过 任何 样式 ， 则 弹出 式 荣 单 显 示 “ 无 ”>。 如 果 已 对 所 选 内 容 
应 用 了 多 个 样式 ， 则 弹出 式 某 单 是 空 的 。 使 用 “类 ”弹出 菜单 可 执行 下 列 操作 : 
(1) 在 列表 中 选择 要 应 用 于 所 选 内 容 的 样式 。 
(2) 选择 “无 ”删除 当前 所 选 内 容 应 用 的 样式 。 
(3) 选择 “附加 样式 表 ” 打 开 一 个 可 以 附加 外 部 样式 表 的 对 话 框 。 
(4) 选择 “ 重 命 名 ”可 以 重新 为 当前 选中 的 样式 命名 。 
Dreamweaver CS6 文 持 多 CSS 类 选区 ， 即 可 以 将 多 个 CSS 类 应 用 于 单个 元 素 。 选 
择 一 个 元 系 ， 执 行 以 下 方式 之 一 打开 “多 黄 选 区 ”对 话 框 ; 
(1) 在 HIML 属性 和 面板 上 的 “类 ”下 拉 列 表 中 选择 “应 用 多 个 类 ”。 
(2) 在 CSS 属性 面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 “应 用 多 个 类 ”。 
(3) 在 “文档 ”窗口 底部 的 标签 选择 器 上 单 击 鼠 标 右 键 ， 在 弹出 的 下 拉 沫 单 中 选择 
“设置 类 ”|“ 应 用 多 个 类 ”。 
在 “多 类 选区 ”对 话 框 中 选择 所 宕 的 多 个 类 。 应 用 多 个 类 之 后 ，Dreamweaver 会 根据 
用 户 的 选择 来 创建 狐 的 多 类 : 
令 “链接 ”: 创建 所 选 文 本 的 超 文 本 链接 。 单 击 文件 夹 图 标 浏览 站 点 中 的 文件 ， 键 
入 URL， 将“ 指 问 文件 ”图 标 拖 到 “站 点 ”面板 中 的 文件 ; 或 将 文件 从 “站 点 ” 
面板 拖 到 框 中 。 


令 “目标 ”: 指定 将 在 其 中 加 载 链接 文档 的 框 杂 或 窗口 。 

令 ”标题 为 超级 链接 指定 文本 工具 提示 ， 即 在 浏览 器 中 ， 当 鼠标 移 到 超级 链接 上 时 
显示 的 提示 文本 。 

令 上 二: 将 文本 字体 设置 为 粗 体 。 

令 “: 将 文本 字体 设置 为 料 体 。 


激 醒 元 灿 讨 志 其 pp 溉 


TRYET CYB 守 将 届 人 梨 准 并 入 


令 ” 王 ; 建立 无 序列 表 ， 方 法 是 选择 需要 建 并 列表 的 文本 ， 然 后 里 击 该 按钮 。 

令 ” 王 : 建立 有 序列 表 ， 方 法 同 无 序列 表 一 样 。 

令 三 : 设置 文本 减少 右 缩 进 。 

人 一 : 设置 文本 增加 右 缩 进 。 

令 ”[ 页 面 属性 .|， 单 击 此 按钮 弹出 “页 面 属性 ”对 话 框 ， 对 页 面 属性 进行 设置 。 
令 | 引 束 硕 目 ..]， 列表 项 的 属性 设置 窗口 。 它 的 使 用 方法 是 将 光标 放置 在 任意 列表 


位 置 ， 则 该 按钮 变 为 可 用 ， 然 后 单 击 访 按钮， 打开 列 表 属 性 设置 窗口 ， 进 行 相应 
的 设置 。 
人 局: 显示 与 文本 属性 设置 面板 有 关 的 帮助 信息 。 
信 ” 攻 ,打开 快速 标识 符 编辑 框 ， 可 输入 HTML 代码 。 
从 图 4-9 可 以 看 出 ， 在 Dreamweaver CS6 中 不 能 直接 在 属性 面板 上 利用 HTML 格式 
化 文本 的 大 小 、 衬 体 、 颜 色 以 及 在 页 面 中 的 对 章 方式 。 如 果 要 设置 这 些 属性 ， 可 以 定义 


CSS 规则 格式 化 文本 。 
单 击 属性 面板 左上 和 角 的 晤 号 按钮 ， 即 可 设置 CSS 格式 ， 如 图 4-10 所 示 。 


属性 ee 

《> HITHL 目标 规则 | < 基 css 规则 > | 字体 四 | 默认 字体 ”Ivx|jB 了 二 琶 二 宣 加 

| 全 css | 编辑 规则 大小 [8) 面 v| 加 | 村 
页 面 属性 


图 4-10 文本 属性 设置 面板 


该 面板 中 的 各 个 选项 的 功能 简要 说 明 如 下 : 
令 目标 规则 : 在 CSS 属性 检查 需 中 正在 编辑 的 规则 。 在 对 文本 应 用 现 有 样 卫 的 情 
况 下 ， 在 页 和 面 的 文本 内 部 单 击 时 ， 将 会 显示 影 啊 文 本 格式 的 规则 。 用 户 也 可 以 使 
用 “目标 规则 ”下 拉 菜 单 创建 新 的 CSS 规则 、 新 的 内 联 样式 或 将 现 有 类 应 用 于 
所 选 文 本 。 
使 用 “目标 规则 ”可 以 执行 以 下 操作 : 
(1) 将 插入 点 放 在 已 应 用 CSS 规则 的 文本 块 的 内 部 ， 访 规则 将 显示 在 “目标 规则 ” 
弹出 末 单 中 。 
(2) 从 “目标 规则 ”下 拉 列 表 中 选择 一 个 规则 ， 即 可 应 用 于 当前 选中 的 文本 。 
(3) 通过 使 用 CSS 属性 检查 融 中 的 各 个 选项 对 已 创建 的 规则 进行 更 改 。 


时 
ss 
VY 
得 N = 
@ 
OO 
Ji 


中 注意 : 
2 在 创建 CSS 内 联 样式 时 ，Dreamweaver 会 将 样式 属性 代码 直接 添加 到 页 


面 的 body 部 分 。 

令 ”编辑 规则 : 单 击 该 按钮 可 以 打开 目标 规则 的 “CSS 规则 定义 ”对 话 框 进行 修改 。 

如 果 从 “目标 规则 ”下 拉 列 表 中 选择 了 “新 建 CSS 规则 ”选项 ， 然 后 单 击 “编辑 规 
则 ”按钮 ， 则 Dreamweaver 会 打开 “新 建 CSS 规则 定义 ”对 话 框 : 

令 ”CSS 面板 : 单 击 该 按钮 可 以 打开 “CSS 样式 ”面板 ， 并 在 当前 视图 中 显示 目标 
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规则 的 属性 。 


令 “字体 ”: 设置 目标 规则 的 字体 。 如 果 字 体 列 表 中 没有 需要 的 字体 ， 可 以 单 击 字 
体 下 拉 列 表 中 的 “编辑 字体 列表 ”项 ， 在 弹出 的 对 话 框 中 设置 需要 的 字体 列表 。 

令 “大 小 ”: 设置 目标 规则 的 字体 大 小 。Dreamweaver CS6 预 置 了 18 种 字号 。 

令 BB: 向 目标 规则 添加 粗 体 属性 。 

令 工 : 向 目标 规则 添加 斜体 属性 。 

令 ” 主 ; 向 目标 规则 添加 左 对 齐 属性 。 

令 ” 主 ; 向 目标 规则 添加 居中 对 齐 属性 。 

令 ”三 ; 向 目标 规则 添加 右 对 齐 属性 。 

争夺 :向 目标 规则 添加 两 端 对 齐 属性 。 

令 ” [: 将 所 选 颜色 设置 为 目标 规则 中 的 字体 颜色 。 


单 击 该 图 标 会 打开 两 色 面 板 ， 同 时 鼠标 变 成 吸管 的 形状 ， 吸 管 可 以 吸取 屏幕 上 任何 一 
点 的 磊 色 作为 文本 的 闫 色 (Windows 开始 来 单 栏 中 的 羚 色 除外 )。 如 果 要 限制 颜色 选取 范 
围 ， 可 以 单 击 颜 色 盒 右 边 的 三 角 投 钮 ， 从 弹出 的 下 拉 沈 单 中 选择 颜色 样本 。 如 果 选 择 按 钮 
回 , 则 可 以 清除 当前 的 颜色 设置 .用 户 也 可 以 直接 在 相 邻 的 文本 字段 中 输入 十 六 进 制 值 ( 例 
如 #FF0000〉 作为 学 体 闫 色 。 

\ 注意 : 

2 “字体 ”"、“ 大 小 ”"、“ 文 本 颜色 ”、“ 粗 体 ”"、“ 和 斜体 ”和 “对 齐 " 属 性 始终 显示 应 

ex 口中 当前 所 选 内 容 规 则 的 属性 。 更改 其 中 的 任何 属性 ， 将 会 影响 目标 规 

则 。 


4.2.2 设置 段 洛 格式 


所 谓 段 洲 ， 丈 是 一 段 格式 上 统一 的 文本 。 在 文档 窗口 中 ， 每 输入 一 段 文 字 ， 投 下 回 车 
键 后 ， 就 目 动 生成 一 个 段 洲 。 按 下 回 车 键 的 操作 通 癌 被 称 作 硬 回 车 ， 可 以 说 ， 段 洛 葡 是 市 
有 便 回 车 的 文字 组 合 。 

在 HIML 中 ， 上 段落 主要 由 标记 <p> 和 </p> 所 定义 ， 在 Dreamweaver 的 文档 窗口 中 ， 
按 下 一 次 回 车 键 ， 都 会 目 动 为 上 面 输入 的 段落 包围 上 <p> 和 <p> 标 记 。 例 如 ， 如 下 的 代码 
显示 了 一 段 文 字 : 

<p> 网 页 制作 DIY 系列 一 Dreamweaver CS6</p> 

实际 有 时 可 以 不 使 用 <p> 和 </p> 标 记 ， 而 是 采用 其 他 类 型 的 标记 来 定义 段 沙 。 例 如 ， 
将 一 行文 字 设 置 为 “标题 1” 格 式 ， 实 际 上 是 将 该 行文 学 两 端 添加 <sh1> 和 </hl> 标 记 ， 它 

方面 定义 了 该 行文 学 的 标题 级 别 ， 为 一 方面 也 起 到 定义 该 行文 学 为 一 个 段 洲 的 作用 。 

使 用 属性 和 面板 中 的 “格式 ”弹出 六 蛙 或 “格式 ”| “上 段落 格式 ” 子 采 单 可 以 应 用 标准 
段 洲 和 标题 标签 。 对 段 洛 应 用 标题 标签 时 ，Dreamweaver 目 动 添加 下 一 行文 本 作为 标准 段 
洛 。 和 在 要 更 改 此 设置 ， 请 执行 “编辑 ”| “ 肯 选 参数 ”命令 ， 然后 在 “常规 ”类 别 中 的 “ 编 
辑 选 项 ”下 确保 取消 选中 “标题 后 切换 到 普通 段 洲 ”如 图 4-11 所 示 。 
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文档 选项 : 网 显示 欢迎 屏幕 G) 
回 自动 时 重新 打开 文档 外) 
加 打开 只 读 文 件 时 获 结 用 户 0W) 
四 局 用 相关 文件 上) 
搜索 动态 相关 文件 占 ): | 手动 ”区 
移动 立 件 时 更 新 链接 LL): | 提示 立 
编辑 选项 : 四 插入 对 象 时 显示 对 话 框 上 ) 
回 区 许 戏 宇 节 内 联 输入 他) 
四 区 许多 个 连续 的 空格 加 ) 
[用 <strong> 和 <em> 代替 <b> 和 《i>0nD 
加 在 p> 或 Ql 盖 6》 标签 中 放置 可 编辑 区 域 时 发 出 警 肯 


历史 步 又 最 多 次 数 0D): [50 | 
拼写 字典 (6): ~ 


| 


图 4-11 参数 设置 对 话 框 


4.3 用 CSS 样式 格式 化 文本 


CSS《〈 层 登 样 式 表 ) 是 一 种 对 文本 进行 格式 化 操作 的 高 级 技术 ， 从 一 个 较 高 的 级 别 上 
对 文本 进行 控制 。 使 用 CSS 设置 页 面 格式 时 ， 内 容 与 表现 形式 是 相互 分 开 的 。 页 面 内 容 
位 于 上 自身 的 HTML 文件 中 ,而 定义 代码 表现 形式 的 CSS 规则 位 于 外 部 样式 表 或 HTML 
文档 的 男 一 部 分 (通常 为 <head> 部 分 ) 中 。 使 用 CSS 可 以 非常 灵活 并 更 好 地 控制 页 面 
的 外 观 ， 从 精确 的 布局 定位 到 特定 的 学 体 和 样式 等 ,而 且 可 以 在 文档 中 实现 格式 的 目 动 更 
新 。 利 用 CSS， 可 以 对 现 有 的 标记 格式 进行 重新 定义 ， 也 可 以 自行 将 某 些 格式 组 合 定义 为 
新 的 样式 ， 甚 至 可 以 将 格式 信息 定义 于 文档 之 外 。 

Dreamweaver CS6 一 个 很 大 的 特点 就 是 全 面 采 用 CSS 样式 控制 文本 、 图 像 、 表 格 等 网 
页 元 素 的 样式 。 而 且 在 以 普通 方式 格式 化 文本 时 ， 会 自动 生成 相应 的 CSS 样式 ， 以 后 要 
再 次 使 用 相同 的 样式 ， 只 需 选 中 对 象 后 在 其 属性 面板 的 样式 下 拉 沫 单 中 选择 自动 生成 的 
CSS 样式 即 可 。 

执行 “窗口 ”|“CSS 样式 ”命令 ,或 单 击 属性 面板 上 的 “CSS ”按钮 , 即 可 打开 “CSS 
样式 ”面板 ， 如 图 4-12 所 示 。 


图 4-12 “CSS 样式 ”浮动 面板 


00 


Dreamweaver CS6 为 最 佳 做 法 提供 了 文 持 ， 包 括 对 局 级 CSS 的 使 用 。 全 部 CSS 功 
能 合并 在 一 个 面板 集合 中 , 并 已 得 到 增强 .Dreamweaver CS6 提供 一 组 预先 设计 的 CSS 布 
局 ,它们 可 以 帮助 用 户 快 速 设计 好 页 面 并 开始 运行 ,并且 在 代码 中 提供 了 丰 宙 的 内 联 注 释 
以 帮助 用 户 了 解 CSS 页 面 布局 。 借 助 管理 CSS 功能 ， 用 户 可 以 轻松 地 在 文档 之 间 、 文 
档 标 题 与 外 部 表 之 则 、 外 部 CSS 文件 乙 间 以 及 更 多 位 置 乙 间 移 动 CSS 规则 。 此 外 ， 还 
可 以 将 内 联 CSS 转换 为 CSS 规则 , 并 且 只 需 通 过 拖 放 操作 即 可 将 它们 放置 在 所 需 位 置 。 
用 户 可 以 更 加 轻松 、 更 有 效率 地 使 用 CSS 样式 。 使 用 狐 的 界面 还 可 以 更 方便 地 查看 应 用 
于 具体 元 素 的 样式 层 登 ， 从 而 能 够 轻松 地 确定 在 何 处 定义 了 属性 。 
利用 “CSS 样式 ”和 面板 可 以 跟踪 影响 当前 所 选 幢 面 元 泰 的 CSS 规则 和 属性 ， 或 影响 
整个 文档 的 规则 和 属性 ， 还 可 以 在 不 打开 外 部 样式 表 的 情况 下 修改 CSS 属性 。 在 浮动 面 
板 上 可 以 选择 两 种 模式 的 视图 ， 选 择 “ 全 部 ”模式 ， 则 列 出 整 份 文件 的 CSS 规则 和 属性 ; 
选择 “当前 ”模式 ， 则 显示 当前 选取 页 面 元 素 的 CSS 规则 和 属性 。 
“CSS 样式 ”面板 包括 以 下 内 容 : 
令 ”名 附加 样式 表 ， 打 开 “ 链 接 外 部 样式 表 ” 对 话 框 ， 选 择 一 个 外 部 样式 表 分 配 
给 当前 文档 。 
争 电 : 新 建 CSS 规则 ， 打 开 “ 新 建 CSS 样式 ”对 话 框 ， 为 特定 文档 创建 新 的 样式 
或 创建 新 的 外 部 样式 表 。 
令 王 : 编辑 样式 表 ， 打 开 < 样 式 > 对 话 框 ， 编 辑 当 前 文档 中 或 外 部 样式 表 中 的 任何 
样式 。 
令 ” 囊 : 删除 选中 样式 表 中 的 CSS 样式 。 
4.3.1 创建 CSS 样式 表 


创建 一 个 CSS 笠 陈 的 步骤 如 下 : 
(1) 将 插入 点 放 在 文档 中 ， 然 后 在 CSS 样式 面板 中 ， 单 击 面板 右 下 角 区 域 中 的 痢 建 
CSS 样式 按钮 则 ， 弹 出“ 新建 CSS 规则 ”对 话 框 ， 如 图 4-13 所 示 。 或 执行 “格式 ”|“CSS 
样式 ”|“ 狐 建 ” 命 令 打开 弹出 “新 建 CSS 规则 ”对 话 框 。 


新 建 C55 规则 


为 Css 规则 选择 上 下 文选 择 器 类 型 。 
| 类 ( 可 应 用 于 任何 HTWL 元 素 ) 


选择 器 名 称 : 
选择 或 输入 选择 器 名 称 。 


规则 定义 : 
选择 定义 规则 的 位 置 。 
| 避 限 该 文档 ) 


图 4-13 “新 建 CSS 规则 ”对 话 框 
(2) 定义 要 创建 的 CSS 样式 的 类 型 : 知 要 创建 可 作为 “类 ”属性 应 用 于 任何 HTML 
元 素 的 目 定 义 样 式 ， 请 选择 “选择 此 类 型 ”中 的 “类 (可 应 用 于 任何 标签 )”， 然 后 在 “ 选 
67 
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择 赤 名 称 ” 域 中 输入 样式 名 称 。 

\ 注意 : 

2 类 名 称 必 须 以 英文 字母 或 句点 开头 ， 可 以 包含 任何 字母 和 数字 组 合 。 不 可 

包含 空格 或 其 他 标点 符号 。 

各 要 定义 包含 特定 了 P 属性 的 标签 的 目 定 义 样 式 ， 请 选择 “ID《〈 仅 应 用 于 一 个 HTML 
元 素 )” 选 项 ， 然 后 在 “选择 大 名 称 ” 文 本 框 中 和 输入 唯一 ID。 

7 注意 : 

2 ID 必须 以 英文 字母 开头 ， 可 以 包含 任何 字母 和 数字 组 合 。 不 应 包含 空格 

或 其 它 标点 符号 。 可 选择 在 名 称 前 添加 “#” 号 。 

右 要 重 定 义 特定 HTML 标签 的 默认 格式 , 请 选择 “标签 (重新 定义 特定 标签 的 外 观 )， 
然后 在 “标签 ” 域 中 输入 一 个 HTML 标签 ， 或 从 弹出 琳 单 中 选择 一 个 标签 。 

若 要 定义 同时 影响 两 个 或 多 个 标签 、 类 或 ID 的 复合 规则 ， 请 选择 “复合 内 容 (基于 
选择 的 内 容 )”， 然 后 在 “选择 匿名 称 ” 下 拉 列 表 中 和 输入 一 个 或 多 个 HTML 标签 ， 或 从 弹 
出 式 菜 单 中 选择 一 个 标签 。 

(3) 选择 定义 样式 的 位 管 : 

厂 要 创建 外 部 样式 表 ， 请 选择 “新 建 样式 表 文 件 ”。 

厂 要 在 当前 文档 中 髋 入 样式 ， 请 选择 “ 仪 限 该 文档 ”。 

(4) 单 击 “ 确 定 >， 出 现 “CSS 规则 定义 ”对 话 框 ， 如 图 4-14 所 示 。 


-tit 的 C55 规则 定义 


类 型 


> 
| 和 


Font-family (F): 


Font-size(S):| ”网 Font-—weieht WW): 


Font-style (T): | | Font-variant [V)]: 


洗车 入学 用 趟 后 a 
匣 测 不测 鹿 南部 3 


Line-height (IT): Text-transform (R): 


Text-decoration(D): [| |underline (WU) Color (C) : 男 
回 ] overline (0) 
[jline-through (LL) 
加 jblink 证) 
[] none (HN) 


| 


图 4-14 “CSS 规则 定义 ”对 话 框 
(5) 设置 狐 CSS 样式 选项 ， 然 后 单 击 “确定 ”按钮 。 
Dreamweaver CS6 新 增 CSS3 过 渡 效 果 。 使 用 CSS 过 小 效 果 可 将 平滑 属 性 变化 应 用 
于 页 面 元 素 ， 以 啊 应 触发 句 事 件 ， 如 惹 停 、 单 击 和 聚焦 。 


4.3.2 链接 /导入 外 部 CSS 样式 表 


所 谓 外 部 CSS 样式 表 指 的 是 一 个 包含 样式 和 格式 规范 的 外 部 文本 文件 。 当 对 一 个 外 
部 的 CSS 样式 表 进 行 了 编辑 后 ， 所 有 同 该 CSS 样式 表 链 接 的 文档 都 会 根据 所 作 的 修改 进 
行 更 新 。 可 以 通过 导出 文档 中 现 有 的 CSS 样式 来 创建 新 的 CSS 样式 表 ， 也 可 以 给 文档 导 
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入 或 链接 一 个 外 部 CSS 样式 表 来 应 用 样式 。 
在 Dreamweaver CS6 中 执行 以 下 操作 将 CSS 样式 表 链 接 或 导入 到 文档 。 
(1) 执行 “窗口 ”| “CSS 样式 ”命令 ,打开 CSS 样式 面板 。 
(2) 在 CSS 样 陈 面板 上 ， 单 击 “ 附 加 样 陈 表 ” 按 钮 鳞 ， 此 时 会 弹出 “链接 外 部 样式 
表 ” 对 话 框 ， 从 中 可 以 选择 外 部 CSS 样式 表 的 路 径 ， 如 图 4-15 所 示 。 
(3) 选择 “链接 ”或 “导入 ”选项 指定 和 创建 用 于 给 文档 分 配 CSS 样式 表 的 标签 ， 
两 者 的 区 别 在 于 ， 导 入 会 将 外 部 CSS 样式 表 的 信息 市 入 当前 文档 ， 而 链接 则 只 恋 取 和 传 
送信 上 息 ， 不 会 转移 信息 。 虽 然 导 入 和 链接 都 可 以 将 外 部 CSS 样式 表 中 的 所 有 样式 调用 到 
当前 文档 中 ， 但 链接 可 以 提供 的 功能 更 多 ， 适 用 的 浏览 器 也 更 多 。 
(4) 单 击 对 话 框 中 的 “浏览 ”按钮 ， 在 弹出 的 “选择 样式 表 文 件 ” 对话 框 中 选择 CSS 
文件 ， 如 图 4-16 所 示 。 


选择 文件 名 自 : ® 交 件 系统 站 点 根 目录 
〇 数据 源 


查找 范围 并): 回 education v| 3 谎 = 国 > 


链接 外 部 样式 表 


文件 ARLCG): | ~ 

添加 当 : 四) 链接 总 ) 文件 类 型 (T) : 样式 表 交 件 ff. css) 
OA 

媒体 00: | v| 

您 也 可 以 输入 逗号 分 隔 的 媒体 类 型 列表 。 


URL.: file: /iC|/Inetpub/wwwroot/ educationi* 
相对 于 : EZ 
在 站 点 定 尺 中 更 改 默 认 的 链接 相对 于 


Dreamweaver 的 范例 样式 表 可 以 帮助 你 起步。 
图 4-15 “链接 外 部 样式 表 ” 对 话 框 图 4-16 “选择 样式 表 文 件 ” 对 话 框 


(5) 在 “媒体 ”弹出 式 菜 单 中 ， 指 定 样 陈 表 的 目标 媒体 。 
(6) 单 击 “ 了 预览” 按钮 确认 样式 表 是 否 将 所 需 的 样式 应 用 于 当前 页 面 。 
如 果 应 用 的 样式 没有 达到 预期 效果 ， 早 击 “取消 ”删除 该 样式 表 ， 页 面 回 到 原来 的 外 
观 。 
(7) 单 击 “ 人 确定” 按钮 ， 完 成 链接 或 导入 外 部 CSS 样式 表 。 
至 此 样式 表 已 经 分 配给 当前 的 Dreamweaver CS6 文档 ， 表 中 的 样式 也 会 显示 在 “CSS 
样式 ”浮动 面板 中 。 


4.3.3 修改 CSS 样式 表 


Dreamweaver CS6 提供 了 多 种 方式 对 样式 表 进 行 修 改 。 

Lo 

单 击 属性 面板 上 的 “CSS” 按 钮 ， 打 开 “CSS 样式 ”面板 ， 如 图 4-17 所 示 。 双 击 “ 所 
有 规则 ”(“ 全 部 ”模式 下 ) 窗 格 中 的 茶 条 规则 ， 或 双击 “上 所 选 内 容 的 摘要 ”(“ 当 前 ” 模 
式 下 ) 窗 格 中 的 茶 个 属性 ， 弹 出 “CSS 样式 定义 ”对 话 框 。 修 改 好 后 ， 单 击 “ 确 定 ” 完 成 
对 样式 的 修改 。 

2 二 
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执行 “窗口 ”|“CSS 样式 ”命令 打开 CSS 样式 面板 ， 选 中 要 修改 的 样式 后 单 击 底部 
的 “编辑 样式 表 ” 按 钮 十 ， 打 开 “CSS 样式 定义 ”对 话 框 。 修 改 好 后 ， 单 击 “ 确 定 ” 按 
钮 完成 对 样式 的 修改 。 

9 NA 二 

执行 “窗口 ”|“CSS 样式 ”命令 打开 CSS 样式 面板 ， 在 “所 有 规则 ” 窗 格 (“全 部 ” 
模式 下 ) 中 选择 一 条 规则 ， 或 在 “所 选 内 容 的 摘要 ” 窗 格 (“当前 ”模式 ) 中 选择 一 个 属 
性 ， 然 后 在 下 面 的 “属性 ” 窗 格 中 编辑 该 规则 的 属性 。 如 图 4-18 所 示 。 


wisited 
.fontstvyle 
#tablestvyle 0 
“a:link” 的 尾 性 
[, #FFF 


color 
font-family zon 
font-size 


3 


图 4-17 “CSS 样式 ”面板 图 4-18 修改 CSS 属性 


Dreamweaver CS6 新 增 了 CSS 检查 模式 ， 人 允许 开发 人 员 以 可 视 化 方式 评 细 显示 CSS 
框 模型 属性 (包括 填充 、 边 框 和 边 距 )， 轻 松 切 换 CSS 属性 ， 且 无 需 谈 取代 人 码 或 使 用 独立 
的 第 三 方 实用 程序 。 在 实时 视图 下 ， 单 击 文档 工具 柱 上 的 “检查 ”按钮 即 可 打开 CSS 检 
全 模式 。 

此 外 , 利用 Dreamweaver CS6 新 增 的 CSS 启用 / 禁用 功能 , 开发 人 员 可 以 百 接 在 CSS 
样式 面板 去 挥 注释 或 重 狐 局 用 部 分 CSS 属性 ， 并 可 直接 但 看 去 挥 注释 特定 属性 和 值 之 后 
页 面 上 具有 的 效果 ， 而 不 必 直 接 在 代码 中 做 出 更 改 。 在 “CSS 面板 ”的 属性 列表 中 选中 要 
禁用 或 重新 启用 的 CSS 属性， 然后 单 击 “CSS 面板 ” 右 下 角 的 “禁用 /启用 CSS 属性 ” 按 
钮 总 即 可 。 禁 用 CSS 属性 只 会 取消 指定 属性 的 注释 ， 而 不 会 实际 删除 该 属性 。 


4. 3.4 ”CSS 样式 的 应 用 


下 面 以 一 个 例子 演示 CSS 样式 在 格式 化 文本 的 应 用 。 本 例 要 实现 的 是 ， 在 文档 中 建 
六 一 个 链接 ， 用 CSS 样式 控制 链接 文本 为 隶书 字体 、 无 下 划 线 、 蓝 色 ; 当 光 标 移动 到 链 
接 文本 上 方 时 ， 文 本 字体 变 大 并 且 颜 色 变 成 红色 。 本 例 效 果 如 图 4-19 所 示 。 
本 例 制作 步骤 如 下 : 
01 新建 一 个 文件 , 在 设计 视图 中 输入 “CSS 控制 链接 文本 格式 ”打开 “页 面 属性 ” 
对 话 框 ， 设 置 字体 为 “隶书 ”大 小 为 36。 
0 全 选中 文本 ， 在 属性 面板 中 “链接 ”文本 框 中 随意 输入 大 和 干 字 符 〈 如 abc)， 这 样 
文本 将 成 为 一 个 链接 。 这 时 按 F12 预览 其 效果 如 图 4-20 所 示 。 
03 执行 “窗口 ”|“CSS 样式 ”命令 ,在 CSS 样式 面板 中 ， 单 击 面 板 右 下 角 的 “新 
建 CSS 规则 ”按钮 名， 弹出 “新 建 CSS 规则 ”对 话 框 。“ 选 择 器 类 型 ”选择 “复合 内 容 ”， 
70 


选择 此 名 称 为 alink， 规 则 定义 位 置 为 “ 仅 限 该 文档 ”。 


、 
三 无 标题 立 档 = Wndows lnternet Erpinrer l= 区 | 


起 Cony wel 本 * 天 全 


展 CtIimtpob rt Ww 六 遍 
窜 史 二 二 | 广电 ma 臣 | 帝 雷 Maasiail 画 
十 | 


傅 妆 专 天 人 训 中 = BN Jinsil 站 
敌 无 标题 六 将 
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Coo 控 制 链 接 文 本 格式 


图 4-19 ”实例 效果 
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图 4-20 ”普通 链接 效果 
04 单 击 “确定 ”按钮 ， 弹 出 “CSS 规则 定义 ”对 话 框 。 设 置 对 话 框 中 的 参数 ， 具 
体 设置 如 图 4-21 所 示 。 


a:1link 的 C55 规则 定义 


类 型 


| 
] Font-family (F): | 
| 


Font-sizre (3): | v px v Font-weight (WW): 


洲 沫 砚 册 计 半 其 pp 溉 


Font-stvyle (T): v Font-variant ON): 


Line-heieht (IT): | v Text-transform (R): 


Text-decoration TD): [ |underline (VU) Calor 站) 图 | 
[Loverline (0) 
[line-throueh (LL) 
blink (EB) 
[Y] none (NH) 
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图 4-21 “CSS 规则 定义 ”对 话 框 


05 单 击 “确定 ”按钮 ， 完 成 alink 样式 的 设置 。 

06 单 击 在 CSS 样式 面板 中 的 “新 建 CSS 规则 ”按钮 划 ， 弹 出 “新 建 CSS 规则 ” 
对 话 框 。“ 选 择 右 类 型 ”选择 “复合 内 容 ”， 选 择 嚣 名称 为 ahover， 规 则 定义 位 置 为 “ 仅 
限 该 文档 ”。 

07 单 击 “确定 ”按钮 ， 弹 出 “CSS 规则 定义 ”对 话 框 。 设 置 对 话 框 中 的 参数 ， 具 
体 设 置 如 图 4-22 所 示 。 

08. 单 击 “确定 ”按钮 ， 完 成 ahover 样式 的 设置 。 


yO JeldeuU9 


Te en COSBY 交 中 各 准 灾 倒 稚 迄 


a:hover 的 C55 规则 定 闵 


类 型 


Font-family (F): 
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Font-size (3): ¥ px v Font-weight (W): 


< 


Font-style (T): Y | Font-wvariant (WV): 
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图 4-22 “CSS 规则 定义 ”对 话 框 


人 至此， 实例 制作 完成 ， 可 以 按 下 Fl12 键 进行 测试 了 。 妆 光标 移动 到 链接 文本 上 方 时 ， 
文本 字体 变 大 并 且 闫 色 变 成 红色 ; 光标 移 开 时 ， 链 接 文本 恢复 原来 的 黑色 和 小 字体 。 


4.4 添加 超级 链接 


超级 链接 (HyperLink〉 是 网 页 与 网 页 之 间 联 系 的 纽带 。 通 过 超级 链接 的 方式 可 以 将 
各 个 网 页 连 接 起 来 , 使 网 站 中 众多 的 页 面 构 成 一 个 有 机 整体 ,使 访问 者 能 够 在 各 个 页面 之 
间 跳 转 。Internet 的 流行 束 是 因为 有 了 超 链 接 。 超 级 链接 可 以 是 一 段 文本 ， 一 幅 图 像 或 其 
他 网 页 元 素 ， 当 在 浏览 器 中 用 鼠标 单 击 这 些 对 象 时 , 浏览 器 可 以 根据 指示 载 入 一 个 新 的 页 
面 或 者 转 到 页 面 的 其 他 位 置 。 网 页 离 不 开 链 接 ， 本 书 前 和 面 的 草 节 已 经 用 到 链接 拉 术 ， 本 市 
束 对 各 种 链接 拉 术 进行 详细 介绍 。 


4. 4. 1 链接 的 基本 知识 


网 页 上 的 超级 链接 一 般 有 3 种 : 一 种 是 绝对 网 址 (Absolute URL) 的 链接 ， 例 如 链接 
到 一 个 站 点 : http://www.bupt.edu.cn， 束 表示 这 个 链接 指 癌 北京 邮电 大 学 的 主页 ;第 二 种 
是 相对 网 址 的 链接 (Relative URL), 例如 将 主页 上 的 儿 个 文字 链接 到 本 站 点 的 其 他 页 面 上 
去 ; 还 有 一 种 是 同一 个 页 面 的 链接 , 这 束 要 使 用 书签 ,本草 主 要 介绍 有 关 超 级 链接 的 内 容 ， 
包括 其 在 网 页 中 的 表现 形式 , 创建 的 方法 , 创建 和 定位 书签 的 方法 以 及 如 何 编辑 等 。 读 者 
学 后 应 该 能 够 创建 和 编辑 这 几 种 基本 的 超级 链接 。 

超级 链接 由 两 部 分 组 成 , 一 部 分 是 在 浏览 网 页 时 可 以 看 到 的 部 分 , 称 为 超级 链接 载体 ， 
另 一 部 分 是 超级 链接 所 链接 的 目标 。 在 浏览 页 面 时 单 击 链接 的 载体 将 会 打开 该 目标 。 链 接 
的 目标 可 以 是 网 页 、 图 片 、 视 频 或 声音 和 电子 邮件 地 址 等 。 关 于 超级 链接 的 重要 概念 有 : 

1. URL 

URL 英文 全 称 是 Uniform Resource Locator， 中 文 名 称 称 为 统一 资源 定位 符 ， 人 简单 讲 
就 是 网 络 上 一 个 站 点 、 网 页 的 完整 地 址 ， 相 当 于 个 人 的 通信 地 址 。 

比如 ， 在 网 络 上 一 个 完整 的 URL 是 : http:/www.bupt.edu.cn/index.htm。 其 中 http 代 
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表 传 输 协 议 ， 即 超 文 本 传输 协议 (HyperText Transfer Protocol)， 它 与 WWW 服务 器 相对 
应 ,需要 癌 有 关机 构 申 请 。 如 果 是 个 人 站 点， 现在 网 络 世 界 很 发 达 ， 很 多 站 点 部 提供 个 人 
主页 的 存放 空间 ,制作 一 个 人 简单 的 个 人 站 点 提交 到 提供 这 种 服务 的 服务 器 上 , 个 人 主页 就 
获得 了 一 个 完整 的 URL， 全 世界 的 访问 者 都 可 以 浏览 该 主页 了 。 

2.， 绝对 路 径 

绝对 路 径 提 供 链接 文档 的 完整 URL， 包 括 使 用 的 协议 (对 于 网 页 通常 是 http:/)。 例 
如 ,， “http://www.macromedia.com/support/dreamweaver/contents.html” 束 是 一 个 绝对 路 任 。 
必须 使 用 绝对 路 人 径 来 链接 其 他 服务 器 上 的 文档 。 也 可 对 本 地 链接 (文档 在 相同 的 站 点 中 ) 
使 用 绝对 路 径 链 接 ; 如 果 将 站 点 移 到 为 一 个 域 中 ， 所 有 的 本 地 绝对 路 人 笃 链 接 部 将 打 汤 。 而 
且 ， 对 于 本 地 链接 使 用 相对 路 人 径 ， 可 以 在 读者 的 站 点 内 移动 文件 时 提供 很 大 的 灵活 性 。 

3. 文档 相对 路 径 

在 大 多 数 网 站 中 , 文档 相对 路 径 是 用 于 本 地 链接 的 最 合适 的 路 径 。 在 当前 文档 与 链接 
的 文档 在 同一 文件 夹 中 ， 且 很 可 能 长 久保 留 在 一 起 时 ， 文 档 相 对 路 径 是 特别 有 用 的 。 通 过 
指定 从 当前 文档 到 链接 的 文档 在 文件 夹 分 级 结构 中 所 经 过 的 路 人 径 , 也 可 以 用 文档 相对 路 径 
去 链接 其 他 文件 夹 中 的 文档 ,文档 相对 路 人 径 所 包含 的 基本 概念 十 省 略 对 于 当前 文档 和 链接 
的 文档 都 相同 的 绝对 URL 部 分 ， 而 只 提供 不 同 的 那 部 分 路 人 径 。 

4. 根 相 对 路 径 

根 相 对 路 径 提 供 从 站 点 根 文件 夹 到 文档 所 经 过 的 路 径 。 如 果 工 作 于 一 个 使 用 数 合 服务 
人 艺 的 大 型 网 站 或 者 一 台 同 时 作为 数 个 不 同 站 点 主机 的 服务 咽 , 那么 可 能 需要 使 用 根 相 对 路 
人 径 。 不 过 ， 如 果 读 者 不 是 很 熟悉 这 类 路 任 ， 还 是 应 该 继续 使 用 文档 相对 路 径 。 

根 相 对 路 径 以 领头 的 正 斜 线 开 始 ， 代 表 站 点 的 根 文 件 夹 。 例 如 ,，“/bbs/registerhtml” 
是 一 个 指向 文件 registerhtml《〈 该 文件 位 于 站 点 根 文 件 夹 的 bbs 子 文件 夹 中 ) 的 根 相 对 路 
径 。 根 相对 路 径 对 于 在 一 个 经 常 需要 将 HTML 文件 从 一 个 文件 夹 移 到 另 一 文件 夹 的 网 站 
中 指定 链接 通常 是 最 佳 的 路 任 方 式 。 当 移动 一 个 包含 根 相 对 链接 的 文档 时 , 不 需 改变 链接 。 
例如 ，HTML 文件 对 于 相关 文件 (比如 图 像 ) 使 用 的 是 根 相对 链接 ， 那 么 当 移动 HTML 
文件 时 ， 它 的 相关 文件 链接 仍 是 有 效 的 。 不 过 ， 当 移动 或 重 命 名 了 用 根 相对 路 人 径 链 接 有 的 文 
档 时 ， 需 要 更 新 那些 链接 ， 即 使 文档 间 科 此 的 相对 路 径 没 有 改变 。 例如， 如 果 读 者 移动 了 
一 个 文件 来， 所 有 对 那个 文件 夹 中 的 文件 的 根 相 对 链接 必须 更 新 。 如 果 使 用 “文件 ”面板 
移动 或 重 命 名 文件 ， 则 Dreamweaver 将 自动 更 新 所 有 相关 链接 。 

5. 锚 点 (Anchor) 

在 网 页 中 ,需要 调转 到 人 系 一 特定 位 置 时 ， 丈 需要 在 这 个 位 置 建 立 一 个 位 前 标记 ， 操 击 
链接 到 这 个 位 置 标记 的 元 聚 时 ， 页 面 跳 转 到 想 去 的 地 方 。 给 该 位 置 标记 一 个 名 称 ， 以 便 加 
以 应 用 ， 这 个 位 置 标记 瓯 是 锁 点 。 通 过 创建 锚 点 ， 可 以 使 链接 指 癌 当前 文档 或 者 不 同文 档 
中 的 指定 位 置 。 销 点 通常 说 用 来 跳 转 到 特定 的 主题 或 者 文档 的 顶部, 使 访问 者 能 够 快速 浏 
览 到 指定 位 置 ， 加 快 信息 检索 速度 。 


4.4.2 创建 链接 


1 
插入 超级 链接 可 通过 执行 “插入 ”| “超级 链接 ”命令 ， 或 单 击 “名 用 ”插入 面板 中 
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(TBE LT BE ED (CEAXB 区 从 课 站 守 例 用 阐 
的 “超级 链接 ”按钮 吕 ， 打 开 “ 超 级 链接 ”对 话 框 插入 超级 链接 。 操 作 步骤 如 下 : 

(1) 将 插入 点 放 在 文档 中 希望 出 现 超 链接 
的 位 置 。 

(2) 打开 “超级 链接 ”对 话 框 如 图 4-23 
所 示 。 

(3) 在 “文本 ” 域 中 , 输入 要 在 文档 中 作 
为 超级 链接 显示 的 文本 。 

(4) 在 “链接 ”文本 框 中 ,输入 要 链接 到 
的 文件 的 名 称 ， 或 者 单 击 文件 夹 图 标 通过 浏览 图 4-23 ”超级 链接 对 语 框 
选择 该 文件 。 

(5) 在 “目标 ”弹出 式 菜单 中 ， 选 择 应 该 用 于 打开 该 文件 的 窗口 。 当 前 文档 中 所 有 
已 命名 框架 的 名 称 都 显示 在 此 弹出 式 列表 中 。 如 果 指 定 的 框架 不 存在 ， 当 文档 在 浏览 器 中 
打开 时 ， 所 链接 的 页 面 载 入 一 个 新 窗口 ， 该 窗口 使 用 指定 的 名 称 。 也 可 选用 下 列 保留 目标 
名 : 

@ 。_blank: 将 链接 的 文件 载 入 一 个 未 命名 的 新 浏览 器 窗口 中 。 

信 ” _parent: 将 链接 的 文件 载 入 含有 该 链接 的 框架 的 父 框架 集 或 父 窗口 中 。 如 果 含 有 

该 链接 的 框架 不 是 嵌 套 的 ， 则 在 浏览 器 全 屏 窗口 中 载 入 链接 的 文件 。 
令 ”_self: 将 链接 的 文件 载 入 该 链接 所 在 的 同一 框架 或 窗口 中 。 此 目标 为 默认 值 ， 因 
此 通常 不 需要 指定 它 。 

信 ”。_top: 在 整个 浏览 器 窗口 中 载 入 所 链接 的 文件 ， 因 而 会 删除 所 有 框架 。 

(6) 在 “标题 ” 域 中 ， 输 入 超 链接 的 标题 。 

(7) 在 “访问 键 ” 域 中 ， 输 入 键盘 等 价 键 〈 一 个 字母 ) 以 便 在 浏览 器 中 选择 该 链接 。 

(8) 在 “Tab 键 索 引 ” 域 中 ， 输 入 Tab 键 顺序 的 编号 。 

2 

在 一 般 的 情况 下 ， 创 建 的 超级 链接 都 是 在 属性 设置 面板 的 “链接 ”文本 框 中 完成 的 。 
使 用 属性 设置 而 板 可 以 把 当前 文档 中 的 文本 或 图 像 链接 到 另 一 个 文档 。 

(1) 在 文档 窗口 中 选中 需要 建立 链接 的 文本 或 图 像 。 

(2) 执行 “窗口 ”| “属性 ”命令 ， 出 现 对 应 的 属性 设置 面板 。 在 属性 设置 面板 中 
单 击 “ 链 接 ” 文 本 框 后 面 的 文件 夹 图 标 ， 在 弹出 的 文件 框 中 选择 一 个 合适 的 文件 。 或 直接 
在 属性 设置 面板 的 链接 文本 框 中 输入 要 链接 文档 的 路 径 和 文件 名 。 还 可 以 拖 动 链接 文本 杠 
后 面 的 侣 按钮 指向 另 一 个 打开 的 文档 ， 或 者 打开 文档 中 的 某 一 错 点 。 

(3) 选择 被 链接 文档 的 载 入 位 置 。 在 默认 情况 下 ， 被 链接 文档 打开 在 当前 窗口 或 杠 
架 中 。 要 使 被 链接 的 文档 显示 在 其 他 地 方 ， 则 需要 从 属性 设置 面板 的 “目标 ”下 拉 列 表 杠 
选择 一 个 选项 。 

操作 完成 后 ， 可 以 看 到 被 选择 的 文本 变 为 蓝 色 ， 并 且 带 有 下 划 线 。 


4.4.3 链接 到 文档 中 的 指定 位 置 
萌 记 常用 于 长 篇 文章 、 技 术 文 件 等 内 容 的 网 页 ， 在 网 页 中 使 用 错 点 来 链接 文章 的 每 一 
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个 段 钞 ， 以 方便 文章 的 阅读 。 这 样 当 用 户 单 击 东 一 个 超级 链接 时 可 以 转 到 相同 网 页 的 特定 
段 洲 。 链 接 到 文 梢 中 指定 位 置 的 步 又 如 下 : 

(1) 将 光标 放 在 和 欲 设置 销 点 的 位 置 ， 执 行 “ 窗 口 ”|“ 搬 入” 命令， 打开 插入 面板 。 
单 击 “ 捅 入 ”面板 上 的 “利用 ”标签 ， 切 换 到 “第 用 ”插入 面板 。 

(2) 单 击 “ 插 入 ”面板 上 命名 锚 记 图 标 粤 ， 这 时 会 打开 “命名 锚 记 ”对 话 框 ， 如 图 
4-24 所 示 。 在 “ 销 记 名 称 ” 文 本 框 中 输入 该 销 反 名 称 。 


错 记名 称 : | 


图 4-24 “命名 销 记 ”对 话 框 


\ 注意 : 

2 锚 记 名 称 只 能 包含 小 写 ASCII 字母 和 数字 , 不 能 以 数字 开头 。 如 果 看 不 到 

锚 记 标记 ， 可 选择 “查看 ”| “可 视 化 助理 ”| “不 可 见 元 素 ”。 错 记名 称 区 分 大 小 写 。 

(3) 选择 作为 超级 链接 的 文字 ， 然 后 执行 “窗口 ”| “属性 ”命令 ， 出 现 属性 设置 
面板 。 在 属性 设置 面板 上 的 “链接 ”文本 框 中 输入 锚 点 的 名 称 。 


:在 属性 设置 面板 中 的 “链接 ”后 的 文本 输入 框 中 ， 氏 点 名 称 前 面 需要 添加 


| 一 个 特殊 的 符号 “#”， | 


4. 4.4 创建 电子 邮件 链接 


有 时 候 为 了 条 种 特殊 的 需要 想 创 建 一 些 有 个 性 的 网 页 , 当 弟 在 网 页 中 添加 一 些 邮 件 链 
接 。 
(1) 选择 需要 作为 邮件 链接 的 文字 。 
(2) 打开 属性 设置 面板 。 在 属性 设置 面板 的 链接 文本 框 中 输入 邮件 地 址 。 


的 太 :在 属 性 设置 面板 中 的 链接 文本 框 中 ， 邮 件 地 址 前 面 需要 添加 “mailto: ”， 


表示 该 超级 链接 是 邮件 链接 ， 


4.4.5 创建 空 链 接 和 脚本 链接 


除了 可 以 创建 邮件 链接 外 ， 还 可 以 创建 空 链接 和 脚本 链接 。 

(1) 如 来 创建 空 链 接 ， 选 择 欲 作为 罕 链接 的 文本 ， 然 后 打开 属性 设置 面板 。 在 属性 
设置 面板 “链接 ”文本 框 中 输入 “#” 写 ， 即 可 创建 一 个 空 链接 ， 也 称 作 虚 拟 链接 。 

(2) 如 末 创 建 脚本 链接 ， 选 择 震 要 作为 脚本 链接 的 文本 ， 然 后 打开 属性 设置 面板 。 
在 属性 设置 面板 中 “链接 ”文本 框 中 输入 脚本 , 如 :“JavaScriptalert( 您 好 , 欢迎 光临 !)”， 
束 创 建 了 一 个 脚本 链接 。 
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在 浏览 器 中 浏览 时 , 当 把 鼠标 移动 到 虚拟 链接 或 脚本 链接 上 时 , 鼠标 的 形状 变 为 手 形 ， 
单 击 脚本 链接 时 会 弹出 一 个 如 图 4-25 所 示 的 对 话 框 。 
4.4.6 设置 链接 属性 
文本 式 超 级 链接 载体 像 普通 文本 一 样 可 通过 属性 面板 对 字体 大 小 、 颜 色 等 属性 进行 设 
置 。 此 外 超级 链接 还 有 目 己 独 有 的 属性 。 属 性 控制 面板 的 如 图 4-26 所 示 ， 各 选项 功能 介 
绍 如 下 : 


来 自 网 页 的 消息 属性 ss 
| <> HITNL | 格式 严 ) | 无 Yv 关 | tit v | BI 三 疆 和 起 标题 (1) | 
众 您 好 ， 欢 ipXI | 县 css mo 顽 > 链接 O wy 二 中 。 目标 @ 
页 
图 4-25 ”对话 框 图 4-26 ”超级 链接 属性 面板 


令 ” “链接”: 链接 后 的 文本 框 内 容 为 将 要 跳 转 到 的 目标 地 址 。 

、 总 Es 通过 拖拉 该 图 标 建立 超级 链接 。 方 法 如 下 : 执行 “站 点 ”| “在 
站 点 定位 命令, 出 现 要 链接 的 文件 所 在 的 站 点 , 并 找到 该 文件 。 在 Dreamweaver 
CS6 文档 窗口 中 选择 需要 建立 超级 链接 的 文本 , 然后 用 女 标 拖拉 该 图 标 ， 当 指 到 
ai 该 文件 名 上 会 显示 一 个 选择 框 。 释 放 和 鼠标 后 ， 则 链接 文件 的 地 

显示 在 “链接 ”文本 框 内 。 

D4 网 文件 通过 该 图 标 也 可 以 建 并 超级 链接 。 方 法 如 下 : 人 移 选择 需要 建立 
超级 链接 的 文本 ， 然 后 用 鼠标 单 击 访 图标， 弹出 一 个 文件 选择 窗口 ， 从 该 窗口 中 
选择 一 个 要 建立 超级 链接 的 文件 ， 然 后 单 击 “ 确 认 ” 投 钮 关闭 该 窗口 ， 也 可 以 在 
“链接 ”文本 框 中 直接 输入 。 

令 “目标 ”: 设置 超级 链接 打开 的 页 面 显 示 窗 口 及 框架 。“ 目 标 ” 下 拉 列 表 有 _blank、 
parent、self 和 _top 4 个 选项 ， 指 在 不 同 的 窗口 打开 链接 目标 网 面 。 


4.5 ”文本 与 链接 网 页 实例 


下 面 通过 一 个 实例 展示 文本 添加 设置 与 超级 链接 的 应 用 ， 效 果 如 图 4-27 所 示 。 

制作 本 例 请 执行 以 下 操作 : 

01 执行 “文件 ”| “新 建 ” 命 令 ， 弹出 “新 建文 档 ” 对 话 框 。 在 对 话 框 中 选择 “ 空 
日 页 ”类 别 的 HTML 文件 ， 布 局 “无 ?， 单 击 “ 创 建 ”按钮 ， 创 建新 文档 。 

02 切换 到 “设计 ”视图 ， 在 空白 处 右 击 鼠 标 ， 在 弹出 的 快捷 菜单 中 执行 “页 面 属 
性 ”命令 ， 弹 出 “页 面 属性 ”对 话 框 ， 见 图 4-28 所 示 。 

03 在 “背景 闫 色 ” 文 本 框 输 入 “#E5EDE5”。 

04 单 击 “分 类 ”列表 框 中 的 “标题 /编码 ”选项 ,在 出 现 的 “标题 ”文本 框 输入 “ 朱 
意 名 作 欣 鞭 ”。 

05 单 击 “确定 ”按钮 完成 设 定 网 页 背景 颜色 。 
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图 4-27 实例 效果 


外观 (css) 
页 面 字体 FF): | 默认 字体 
大 小 (5): | v| 
文本 颜色 0r): 觅 | 加 00 | 
青 县 颜色 (8): [| #5EDES | 
青 景 图 称 I): [ 【EEC 
重复 E):| v 
左边 距 遇 :| | 右边 距 ):| | 
上 边 距 :| | 下 边 距 (0):| | 


图 4-28 “页 面 属性 ”对 话 框 


06 在 设计 视图 中 输入 文字 “联系 作者 : webmaster， 选 中 “webmaster” 在 属性 面 
板 中 单 击 始 喇 按钮 ， 然 后 从 “目标 规则 ”下 拉 列 表 中 选择 “新 CSS 规则 ” 并 单 击 “ 编 
辑 规则 ”对 话 框 。 

07 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “类 ” “选择 嚣 名称 ”文本 框 中 输入 .stylel， 
然后 单 击 “确定 ”按钮 打开 对 应 的 规则 定义 对 话 框 。 

08 在 规则 定义 对 话 框 中 ， 设 置 字体 大 小 为 16， 在 字体 颜色 框 输入 “#F60” 无 修 
饰 。 单 击 “ 确 定 ” 鬼 钮 之 后 ， 在 属性 面板 上 的 “链接 ”文本 框 中 输入 
“mailto:webmaster@123.com”。 完 成 邮件 链接 。 

09399 输入 文字 “链接 到 新 浪 : http:/www.sina.com.cn”， 选中 http://www.sina.com.cn， 
然后 在 属性 面板 的 “目标 规则 ”下 拉 列 表 中 选择 .style1， 在 属性 面板 上 的 “链接 ”文本 框 
中 输入 http://www.sina.com.cn。 

10 输入 标题 、 页 内 超级 链接 地 址 和 诗词 具体 内 容 。 
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11 选中 “ 朱 总 名 作 欣 赏 ” 按照 第 〈6) 至 (8) 的 方法 新 建 CSS 规则 ， 字 体 选 “ 华 
文 行 楷 和 六 大 小 选 4， 闫 色 输 入 “#336666”， 且 文 本 对 齐 方式 为 “居中 ”。 

12 将 光标 定位 到 词 “ 观 书 有 感 ” 前 ， 执 行 “ 插 入 ”|“HTML”|“ 水 平 线 ”菜单 命 
令 ， 插 入 水 平 线 。 同 样 方法 插入 另外 两 条 水 平 线 。 

13 将 光标 定位 到 词 “ 观 书 有 感 ” 前 ， 单 击 插入 面板 上 的 “种 用 ”标签 激活 第 用 面 
板 ， 单 击 “ 命 名 锚 记 ”按钮 点 弹 出 对 话 框 。 

14 在 “ 锚 记 名 称 ” 文 本 框 输入 “al” 并 单 击 “ 确 定 ” 按 钮 插入 锚 记 。 用 同样 方法 
在 另 两 首 词 标题 前 插入 销 记 ， 销 记名 称 按 从 上 到 下 的 顺序 分 别 为 “a2”“a3 ”。 

15 呈 选中 导航 部 分 的 “ 观 书 有 感 ” 文字 。 设 置 字体 大 小 为 16, 链接 框 中 输入 “#al”。 
用 同样 方法 设置 “春日 ”和 “ 夜 雨 ”的 页 内 链接 。 

16 执行 “文件 ”|“ 保 存 ”， 弹 出 “另存 为 ”对 话 框 。 输 入 文件 名 ， 按 保存 按钮 保 
存 文件 。 到 此 一 个 绽 合 各 种 链接 的 网 页 做 完了 ， 可 以 用 下 打开 看 制作 的 效 末 。 


4.6 动手 练 一 练 


1. 新 建 一 个 文档 ， 输 入 标题 及 两 段 文字 。 标 题 和 段 之 间 以 换行 符 换行 ， 段 之 间 以 回 
车 换行 。 标 题字 体 为 隶书 ， 大 小 为 5， 居 中 显示 ; 段 文本 颜色 为 红色 【〈 帮 FFF00)， 字 体 为 
3 

2. 新 建 一 个 文档 ， 然 后 在 该 文档 创建 一 个 链接 到 你 邮箱 的 E-mail 链接 和 一 个 虚拟 
链接 。 


4.7 思考 题 


1 “ 回 车 ”换行 和 “换行 符 ” 换 行 有 何 区 别 ? 
2. 页 内 链接 和 虚拟 链接 有 何 区 别 ? 它们 分 别 能 起 到 什么 效果 ? 
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背景 图 像 和 图 像 映射 等 效果 的 制作 ; 在 网 页 中 插入 声音 、Flash 视频 、 


四 ”插入 图 像 

@@ 设置 图 像 的 属性 

四 制作 图 像 映 射 

团 插入 声音 等 媒体 元 素 
冉 ”插入 背景 音乐 


本 章 介绍 图 像 和 声音 等 媒体 的 基本 知识 及 使 用 方法 。 内 容 包括 : 图 像 、: 
声音 的 基本 知识 ; 在 网 页 中 插入 图 像 的 方法 ; 图 像 属 性 的 设置 ， 翻 转 图 像 、， 


| Acivex 挫 作 和 Jova eppleis 等 人 以 有 对 共性 和 
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5.1 在 网 页 中 插入 图 像 


图 像 在 网 页 中 的 作用 是 无 可 玲 代 的 。 图 像 不 仅 可 以 修饰 网 页 , 使 网 页 美观 、 图 文 并 太 ， 
而 且 一 幅 合适 的 图 厂 ， 常 第 有 胜 过 数 户 洋洋 酒 酒 的 介绍 的 效果 。 


5.1.1 关于 图 像 


虽然 存在 很 多 种 图 形 文件 格式 ,但 Web 页 和 面 中 通常 只 使 用 3 种, 即 GIF、JPEG 和 PNG。 
目前 GIF 和 JPEG 文件 格式 的 支持 情况 最 好 ， 大 多 数 浏览 器 都 可 以 查看 它们 。 

由 于 PNG 文件 其 有 较 大 的 灵活 性 并 且 文 件 较 小 ， 所 以 它 儿 乎 对 任何 类 型 的 web 图 形 
部 是 最 适合 的 。 但 是 Microsoft Internet Explorer (4.0 和 更 高 版 本 ) 和 Netscape Navigator 

(4.04 和 更 局 版 本 ) 只 能 部 分 文 持 PNG 图 像 的 显示 。 因 此 ， 除 非 正在 为 使 用 支持 PNG 格 
式 的 浏览 右 的 特定 目标 用 户 进 行 设计 ， 否 则 使 用 GIF 或 JPEG， 以 迎合 更 多 人 的 需求 。 各 
种 图 形 文件 格式 介绍 如 下 : 

> GIF( 图 形 交换 格式 ) : 文件 最 多 使 用 256 种 颜色 ， 最 适合 显示 色调 不 连续 或 具有 

大 面积 单一 磊 色 的 图 人像， 例如 叶 舰 条、 按钮、 图 标 、 徽 标 或 其 他 其 有 统一 色彩 和 
色调 的 网 像 。 

> JPEG〔 联 合 图 像 专 家 组 标准 ) 文件 格式 是 用 于 摄影 或 连续 色调 网 像 的 高 级 格式 。 

这 是 因为 JPEG 文件 可 以 包含 数 昕 万 种 颜色 。 随 看 JPEG 文件 品质 的 提高 ， 文 件 的 
大 小 和 下 载 时 间 也 会 随 之 增加 。 通 弟 可 以 通过 压缩 JPEG 文件 在 图 像 品 质 和 文件 大 
小 之 间 达 到 民 好 平衡 。 
> PNG (可 移植 网 络 图 形 〉 文件 格 式 是 一 种 蕉 代 GIF 格式 的 无 专利 权限 制 的 格式 ， 

它 包括 对 索引 色 、 灰 上 度 、 真 彩色 图 像 以 及 alpha 通道 透明 的 支持 PNG 是 Fireworks 
固有 的 文件 格式 。PNG 文件 可 保留 所 有 原始 层 、 矢 量 、 颜 色 和 效果 信息 《例如 阴 
影 ) ， 并 且 在 任何 时 候 所 有 元 素 都 是 完全 可 编辑 的 。 文 件 必 须 具 有 .png 文件 扩展 
名 才能 被 Dreamweaver 识别 为 PNG 文件。 

在 Dreamweaver 文档 中 ，GIF、JPG 和 PNG 图 片 都 可 以 加 入 。 这 些 图 片 不 仅 可 以 直接 
放 在 页 面 上 ， 也 可 以 放 在 表格 、 表 单 以 及 层 里 面 。 在 加 入 图 片 时 ， 还 能 直接 对 图 厂 做 一 些 
修改 。 如 在 属性 和 面板 中 为 图 片 洪 加 链接 、 给 图 片 加 上 一 个 边框 、 改 变 图 厂 的 尺寸 、 在 图 片 
周围 加 上 空白 区 间 以 及 设 定 图 片 对 章 方 式 。 还 可 以 通过 Dreamweaver 的 行为 创建 翻转 各 
片 、 导 航 条 或 图 片 地 图 等 交互 式 图 片 。 

使 用 Dreamweaver 的 参数 设置 对 话 框 设 定 首 选 图 像 纲 辑 器 《如 Fireworks) 可 以 提高 
整个 工作 过 程 的 效率 。 设 置 首 选 图 像 编 辑 融 可 以 让 读者 在 使 用 Dreamweaver 的 同时 局 用 设 
定 的 编辑 器 来 修改 编辑 图 像 。 如 果 将 Fireworks 设置 成 首选 图 片 编辑 器 的 话 , 在 Fireworks 
里 面 修改 完 图 片 后 只 需要 简单 地 单 击 女 标 束 可 以 目 动 更 新 Dreamweaver 中 的 图 片 文 件 了 。 


ee 提示 :不 同 浏览 器 对 PNG 的 支持 是 不 一 样 的 。 因 此 如 果 使 用 PNG 文件 ， 应 该 将 它 


们 导出 为 GIF 或 JPEG， 以 确保 它们 具有 Web 版 本 。 
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5.1.2 插入 图 像 


当 在 Dreamweaver 文件 中 插入 图 片 时 ，Dreamweaver 会 日 动 在 网 页 的 HTML 源 代 人 三 
中 生成 对 该 图 像 文件 的 引用 。 为 了 人 确保 此 引用 的 正确 性 , 该 图 厂 文 件 必 须 保存 在 当前 站 扣 
目录 中 。 如 来 所 用 的 图 厂 不 在 当前 站 点 目录 中 ，Dreamweaver 将 询问 是 否 将 其 复制 到 当前 

yt 

图 像 通 常用 来 添加 图 形 界面 “例如 导航 按钮 )、 具 有 视觉 感染 力 的 内 容 〈 例 如 照片 ) 
或 交互 陈设 计 元 素 《〈 例 如 鼠标 经 过 图 像 或 网 像 地 图 )。 

在 Dreamweaver CS6 中 ， 可 以 在 “设计 ”视图 或 “代码 ”视图 中 将 图 像 插 入 文档 。 在 
Dreamweaver 文档 中 这 加 图 像 时 ， 可 以 设置 或 修改 图 像 属性 并 直接 在 “文档 ”窗口 中 得 看 
所 做 的 更 改 。 

在 文档 中 插入 图 像 ， 可 以 使 用 及 单 栏 中 “插入 ”| “图 像 ” 命 令 ， 也 可 以 使 用 “插入 ?” 
/“ 常 用 ”面板 中 的 插入 图 像 按 钮 图 。 下 面 通过 插入 图 片 和 文字 的 示例 ， 让 读者 了 解 插入 
图 斤 的 具体 步骤 。 插 入 后 的 效果 如 网 5-1 所 示 。 

015 新 建 一 个 文档 ， 单 击 “ 设 计 ” 按 钮 切换 到 “设计 ”视图 。 

02 执行 “搬入 ”| “图 像 ” 命 令 ， 或 单 击 “插入 ”浮动 面板 中 “常用 ” 子 面板 下 
的 “图 像 ”按钮 名 ， 弹 出 “选择 图 像 源 文件 ”对 话 框 。 

03 在 “选择 图 像 源 文件 ”对 话 框 中 选择 所 要 插入 图 像 的 路 径 ， 或 者 直接 在 URL 中 
输入 所 要 插入 网 像 的 路 径 , 此 时 可 以 看 到 图 像 的 预 宽 效果 , 如 图 5-2 所 示 。 如 有 果 没 选中 “ 预 
览 图 像 ” 复 选 框 ， 将 看 不 到 图 像 的 预览 效 末 。 

在 该 对 话 框 中 ， 选 中 “文件 系统 ”可 以 选择 一 个 图 形 文 件 ， 选 中 “数据 源 ” 可 以 选择 
一 个 动态 图 像 源 。 单 击 “ 站 点 和 服务 右 ” 可 以 从 web 站 点 中 选择 图 像 文件 。 


辆 E:\imnaees\cho5\ 握 入 国 恰 与 交 本 . html (XHTHL)* By mn | 


1 


"| 


黄 窟 楼 
作者 ， 上 崔 景 
昔 人 已 乘 黄 锥 去 ， 0 
黄 鹤 一 去 不 复 运 ， 昌 云 干 载 宇 你 修 ，。 
晴 川 历历 汉阳 树 ， 芳 草 妆 芝 由 况 洲 - i 
日 暮 光 关 何 处 是 ， 烟波 和 江上 使 作 毯 。 ~ 括 入 图 梁 旺 娘 下 hl 


， Ee | 三 站 占 定 义 中 更 RY 了 i 天 要 对 于 
<body><div> <p> IR| 池 怀 100% v| 回转 [| 4 远 兰 的 文件 不 在 站 点 档 由 好 下 。 


图 5-1 插入 图 像 与 文本 的 效果 图 5-2 “选择 图 像 源 文 件 ” 对 话 框 


04， 先 定 图 像 后 ， 单 击 “ 确 定 ” 按 钮 ， 如 果 正 在 编辑 的 此 图 像 文 件 没有 保存 ， 那 么 
Dreamweaver 会 弹出 设 定 图 像 文 件 位 置 参数 的 提醒 对 话 框 ， 如 图 5-3 所 示 。 
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水 


Fearnmocoemvar CCXB 字 站 维和 保 六 六 及 

05 单 击 “ 确 定 ” 按 钮 , 此 时 将 显示 “图 
像 标 签 辅 助 功 能 属性 ”对 话 框 (Dreamweaver 
CS6 默认 在 “首选 参数 ”中 激活 了 此 对 话 框 )， 
在 “ 蔡 代 文本 ”和 “详细 描述 ”文本 框 中 输 
入 值 ， 然 后 单 击 “ 确 定 ”。 该 图 像 出 现在 文 
档 中 , [直下 显示 这 个 信息 。 


(i 若 要 创建 站 档 相 对 蹄 径 ， 您 应 读 首 先 保 存 识 档 。 


在 您 悍 存 也 档 之 前 将 使 用 “file: /A 路 种。 


06 自 输入 诗 《 黄 稚 楼 》 文 本 。 


07 再 选中 文字 和 图 片 ， 单 击 属 性 面板 图 5-3 提示 对 话 框 
上 的 居中 按钮 等 。 保 存 文件 ， 并 用 浏览 器 打 
开 文 件 得 到 图 5-1 所 示 的 效果 。 


5.1.3 图 像 的 属性 


将 图 像 插 入 文档 中 后 ，Dreamweaver CS6 会 日 动 按 照 图 像 的 大 小 显示 ， 但 往往 还 要 对 


图 像 的 一 些 属性 进行 具体 调整 ， 如 大 小 、 位 置 、 对 齐 等 。 这 就 要 通过 图 像 属性 控制 面板 实 


坝 。 
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地 图 
RR| 口 OV 原始 尝 器 


选中 一 个 图 像 之 后 ， 文 档 窗口 的 下 方 会 出 现 图 像 属 性 控制 面板 ， 如 图 5-4 所 示 。 


一 目标) 


图 5-4 网 像 的 属性 设置 面板 


该 图 像 属 性 设置 面板 的 各 个 参数 介绍 如 下 : 


> “ID”: 文本 框 中 输入 图 像 的 名 称 ， 以 后 就 可 以 使 用 脚本 语言 (如 JavaScript、 
VBScript) 引用 它 。 

> “ 宽 ”: 用 于 设置 图 像 的 宽度 。 

> “高 ”: 用 于 设置 图 像 的 高 度 。 


当 图 片 被 调整 大 小 后 ，“ 寅 ”和 “高 ” 右 侧 会 册 现 两 个 按 钥 。 单 击 “ 重 转 为 原始 大 小 * 


按钮 总 ， 可 以 取消 修改 图 片 尺 寸 。 单 击 “ 提 交 图 像 大 小 ”按钮 知 ， 则 修改 图 片 尺 寸 。 


> “ 源 文件 ”: 用 于 设置 图 像 源 文件 的 名 称 
> “ “链接 ”: 用 于 设置 图 像 链 接 的 网 页 文件 的 地 址 。 
> “将 换 ”: 用 于 设置 图 像 的 说 明 性 内 容 ， 可 以 作为 图 像 的 设计 提示 文本 。 
> “类 ”:; 用 于 设置 应 用 到 图 像 的 CSS 样式 的 名 子 。 
“地 图 ”及 下 面 的 4 个 按钮 : 用 于 制作 映射 岁 ， 详 细 和 内容 会 在 本 章 的 5.1.8 
有 
> “目标 ”: 用 于 设置 图 像 打开 的 链接 文件 显示 的 位 置 ， 有 4 个 选项 ， 其 意 》 义 分 别 


如 下 : _blank 表示 打开 一 个 新 的 窗口 显示 链接 文件 ，_parent 表示 使 用 包含 超级 链 
接 的 父 窗口 显示 链接 的 文件 ，_self 表示 使 用 超级 链接 所 在 的 窗口 或 框 染 显示 链接 
文件 ， 该 项 是 默认 值 ;，_top 表示 将 链接 的 文件 显示 在 整个 浏览 右 窗 口中 ， 而 不 是 
所 有 框架 


> “原始 ”:; 用 于 设置 一 幅 显 示 在 该 图 像 前 和 面 的 代表 图 像 ， 用 来 快速 显示 主 图 像 的 
内 容 。 大 部 分 设计 者 在 该 处 喜欢 设置 一 幅 与 主 图 像 内 容 一 样 的 黑 日 图 像 或 小 图 像 ， 
这 样 用 户 在 浏览 时 可 以 快速 了 解 图 像 的 信息 

六 .用 于 打开 图 像 处 理 软件 ， 处 理 当前 选中 的 图 像 

庄 ， 用 于 打开 “图 像 优 化 ”预览 对 话 框 ， 并 优化 图 像 。 

二， 用 于 修 前 图片， 市 去 图 片 中 不 需要 的 部 分 。 

又 ， 当 调整 图 片 大 小 后 此 按钮 可 用 。 用 于 往 调整 大 小 后 的 图 片 里 增加 或 减少 像素 
以 提高 图 片 质量 。 

> ”已 : 用 于 改变 图 片 亮 度 和 对 比 度 。 

> ”由 用 于 改变 图 片 内 部 边缘 对 比 度 。 

y 注意 : 

2 Dreamweaver 图 像 编 辑 功 能 仅 适 用 于 JPEG 和 GIF 图 像 文件 格式 。 其 他 
位 图 图 像 文件 格式 不 能 使 用 这 些 图 像 编辑 功能 编辑 。 


5.1.4 图 像 大 小 的 设置 


所 谓 图 像 大 小 的 设置 ,是 指 调整 图 像 在 文档 中 显示 的 宽度 和 高 度 ， 而 不 是 指 岁 像 文 件 
的 存储 大 小 。 可 以 在 Dreamweaver 的 “文档 ”窗口 的 “设计 ”视图 中 以 可 视 化 的 形式 调整 
图 片 的 大 小 ， 图 片 的 文件 大 小 不 发 生变 化 。 

在 Dreamweaver 中 败 像 的 宽度 和 高 上 度 默 认 单 位 为 像素 (Pixel)。 在 文档 中 调整 网 像 的 
宽度 和 高 度 可 以 通过 在 向 像 属 性 控制 面板 中 设置 , 也 可 以 年 接 通 过 归 标 拖 动 来 改变 图 像 的 
大 小 。 调 整 图 像 大 小 时 ， 属 性 检 奏 堪 的 “ 宽 ” 和 “高 ” 域 ， 显 示 该 元素 当前 的 宽度 禹 上 度 
用 鼠标 拖 动 调整 多 像 的 大 小 ， 执 行 以 下 步骤 : 

(1) 在 “文档 ”窗口 中 选择 一 个 图 像 。 岁 像 的 辰 部 、 右 侧 及 右 下 角 出 现 调 整 大 小 手 
柄 。 如 果 未 出 现 调整 大 小 手柄 ， 则 单 击 要 调整 大 小 的 图 像 以 外 的 部 分 然后 重新 选择 它 ， 或 
在 标签 选择 器 中 单 击 相 应 的 标签 以 选择 该 图 像 。 
(2) 执行 下 列 操作 调整 图 像 的 大 小 : 
i 要 调整 图 像 的 宽度 ， 拖 动 右 侧 的 选择 控制 点 。 
要 调整 图 像 的 蜗 度 ， 拖 动 确 六 涡 的 选择 控制 扣 。 
a 整 图 像 的 客 度 和 噩 上 度 ， 拖 动 项 角 的 选择 控制 点 。 
六 要 在 调整 图 像 尺寸 时 保持 元 素 的 比例 〈 宽 高 比 ) ， 在 按 住 Shift 键 的 同时 拖 动 项 
角 的 选择 控制 点 。 

以 可 视 方 式 最 小 可 以 将 元 素 大 小 调整 到 8x8 像素 。 和 要 将 元 素 的 宽度 和 高 度 调 整 到 更 
小 的 大 小 (例如 1x1 像素 )， 在 属性 检查 右 相 应 的 域 中 输入 数值 。 

默认 情况 下 ， 宽 度 和 高 度 约束 比例 缩放 。 单 击 “切换 尺 寸 约束 ”按钮 曲 ， 该 按钮 图 标 
变 为 血 ， 即 可 取消 约束 比例 ， 单 独 缩放 图 片 的 宽度 和 高 度 

莒 要 将 已 调整 大 小 的 元 素 返 回 到 原始 尺寸 ， 在 属性 检 可 器 中 删除 “ 沉 ” 和 “高 ” 域 中 
的 值 ， 或 者 单 击 “ 重 置 为 原始 大 小 ”按钮 总 


AAA 


V VvV Vv YY 


他 浒 过 汶 了 央 6 泪 
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提示 


建议 只 有 在 以 确定 布局 为 目的 时 才 在 Dreamweaver CS6 中 以 可 视 的 方式 调 
整 位 图 的 大 小 。 确定 了 理想 的 图 像 大 小 之 后 ,在 图 像 编辑 应 用 程序 中 编辑 该 文件 。 对 图 像 
进行 编辑 还 可 以 减少 其 文件 大 小 ， 从 而 缩短 下 载 时 间 。 


5.1.5 创建 翻转 图 像 


翻转 图 像 束 是 当 鼠 标 指针 经 过 图 片 时 ， 图 片 会 变 成 男 外 一 张 。 一 个 翻转 图 像 其 实 是 由 
两 张 图 片 组 成 的 : 第 一 图 像 ( 当 页 面 显 示 时 的 图 像 》 和 翻转 图 像 ( 当 鼠标 经 过 第 一 图 像 时 
显示 的 图 像 )。 组 成 图 像 翻 转 的 两 张 图 片 必 须 有 相同 的 尺寸 。 如 果 两 张 图 片 的 尺寸 不 同 ， 
Dreamweaver CS6 会 日 动 将 第 二 张 图 片 尺 寸 调 整 成 与 第 一 张 同样 大 小 。 

下面， 通过 创建 一 个 具体 翻转 图 像 的 示例 ， 了 解 创建 翻转 图 像 的 具体 操作 ， 最 终 的 创 
建 效果 如 图 5-5 和 图 5-6 所 示 。 


习 无 标题 文档 - Hicrosoft-.- 同上 回回 


文件 人 ) 编辑 E) 查看 WW) > 和 迹 接 > 记 


图 5-5 ”翻转 图 像 效 果 (翻转 前 ) 图 5-6 ”翻转 图 像 效 果 (翻转 后 ) 


0199 在 文档 窗口 中 ， 将 光标 置 于 所 要 插入 翻转 图 像 的 地 方 。 

02 执行 “插入 ”| “图 像 对 象 ”| “鼠标 经 过 图 像 ” 命 令 或 单 击 “ 插 入 ”/“ 常 用 ” 
面板 上 的 图 > 下拉 箭头 图 标 弹出 下 拉 菜 单 如 图 5-7 所 示 , 在 弹出 菜单 中 单 击 “ 鼠 标 经 过 图 
像 ” 此 时 会 弹出 插入 翻转 图 像 对 话 框 ， 如 图 5-8 所 示 。 


插入 鼠标 经 过 图 区 
图 像 
图 像 占 位 符 nn 
TN i 
» 旭 和 
区 Fireworks HITML 
站 蚂 制 矩形 热点 蔡 换 立 本 : 『「 
划 给 制 椭圆 热点 按 下 时 ,前 往 的 WRL: 
Tt 挫 制 多 边 形 热点 
图 5-7 插入 图 像 菜 单 图 5-8 “插入 鼠标 经 过 图 像 ” 对 话 框 


034 在 “图 像 名 称 ” 栏 中 输入 翻转 图 像 的 名 称 。 
949 在 “原始 图 像 ” 栏 中 输入 初始 图 像 的 路 径 ， 或 者 单 击 “ 浏 览 ” 按 钮 ， 从 弹出 的 


对 话 框 中 浏览 选择 所 需 网 像 文件 。 


45 汪 在 “鼠标 经 过 图 像 ” 栏 中 输入 翻转 图 像 的 路 径 ， 或 者 单 击 “ 浏 览 ” 按 钮 ， 从 弹 
出 的 对 话 框 中 浏览 选择 图 像 文件 。 选 中 “ 预 载 岂 标 经 过 图 像 ” 前 的 复 选 框 ,这样 可 以 让 图 


刻 预 完 加 筑 到 浏览 费 的 缓存 中 ， 使 图 片 显 示 速 度 快 一 点 。 
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06 单 击 “ 确 定 ” 按 钮 保存 文件 ， 完 成 操作 。 这 样 完 成 了 翻转 图 像 的 创建 ， 可 以 按 
下 F12 键 在 浏览 喜 中 观察 创建 的 结果 。 


5.1.6 设置 背景 图 像 


藻 要 定义 页 面 背 景 的 图 像 ， 可 以 使 用 “页 面 属性 ”对 话 框 。 如 果 同 时 使 用 背景 图 像 和 
背景 闫 色 , 下 载 图 像 时 会 出 现 闫 色 , 然后 图 像 才 新 闫 色 。 如 果 背 景 图 像 包 含 任 何 透 明 像素 ， 
则 背景 颜色 透 过 背景 图 像 显示 出 来 。 下 面 通过 简单 实例 演示 背景 图 像 的 创建 过 程 ， 最 终 的 
效果 如 图 5-9 所 示 。 

0 全 执行 “修改 ”| “页 面 属性 ”命令 , 或 从 文档 设计 视图 的 上 下 文 菜 单 中 执行 “页 
面 属性 ”命令 ， 弹 出 “页 和 面 属性 ”对 话 框 ， 如 图 5-10 所 示 。 


二 mtitled-3 GT)* 


外 观 (Css) 
页 面 字体 灾 ) :| 默 ; 
太 小 (3): 


次 本 颜色 (T): 「 。 
硼 有 睛 颜色 (B): | 


二 下 ED 


重复 (EF): 


左 迪 距 出 ) : 右边 距 (R): 
上 兆 距 人 P): 下 边 距 0): 


00%  v| 曾 取消 


图 5-9 ” 痛 景 图 像 效果 图 5-10 “页 面 属性 ”对 话 杠 


02 设置 背景 图 像 。 单 击 “ 浏 览 ” 按 钮 ， 然 后 浏览 并 选择 图 像 ， 或 者 直接 在 “背景 
图 像 ” 文 本 框 中 输入 缘 景 图 像 的 路 径 。 

03 保存 文件 完成 背景 图 像 制 作 ， 按 下 F12 键 在 浏览 器 中 观察 创建 的 结果 。 

如 果 背 景 图 像 没 有 十 满 整个 窗口 , Dreamweaver 会 平 铺 ( 重 复 ) 背景 图 像 , 不 像 医 5-11 
所 示 的 那样 。 硅 要 防止 背景 图 像 平 铺 ， 可 以 使 用 CSS 样式 表 茶 用 岁 像 平 铺 。 下 面 通过 一 
个 实例 介绍 至 用 图 像 平 铺 的 步骤 ， 其 最 终 效 末 如 图 5-11 所 未。 


[- 
击 mtitled-s (XHITNHL)* i 


|<body. backgr ound ,QU loo%  v| 回 


图 5-11 至 用 图 像 平 铺 


01 有 打开 上 例 制作 的 文件 ,然后 执行 “窗口 ”/“CSS 样式 ” 命令 ,打开 “CSS 样式 ” 
浮动 面板 ， 
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rmoweamar (CODB 守 妆 限 你 准 实 创 表 在 
02。 单 击 “CSS 样式 ”面板 右 下 角 的 “新 建 CSS 规则 ”按钮 ， 弹出“ 新建 CSS 规则 ” 
对 话 框 。 

03 在“ 新建 CSS 规则 ”对 话 框 的 “选择 器 类 型 ”下 拉 列 表 框 中 选择 “类 ”， 在“ 选 
择 器 名 称 ” 文 本 框 中 输入 .background， 在 “规则 定义 ”下 拉 列 表 框 中 选择 “ 仅 限 该 文档 ” 
完成 以 上 设置 后 ， 单 击 “ 确 定 ” 按 钮 ， 弹 出 对 应 的 “CSS 规则 定义 ”对 话 框 。 

04 在 CSS 规则 定义 对 话 框 左 侧 的 “分 类 ”列表 框 中 , 选择 “背景 ”选项 , 如 网 5-12 
所 示 。 


图 5-12 CSS 规则 定义 对 话 框 


05 幼 单 击 “ 浏 览 ” 按 钮 ， 选 择 图 像 文 件 ， 或 是 直接 在 “背景 图 像 ”文本 框 中 输入 图 


像 地 址 。 
06 单 击 “ 重 复 ” 下 拉 列 表 杠 下拉 箭 头 ， 在 下 拉 列 表 中 选择 “不 重复 ” 
该 下 拉 列 表 框 中 各 个 选项 的 功能 简要 介绍 如 下 : 
> ““ 不 重复 ”: 在 元 素 开 始 处 显示 一 次 网 像 。 
> “ “重复 ”: 在 元 素 的 后 面 水 平和 与 二 平 铺 图 像 。 
> “ 横 同 重复 ”和 “ 纵 同 重复 ”: 分 别 水 平和 亚 直 平 铺 图 像 。 
07 完成 以 上 设置 单 击 “ 确 定 ” 按 钮 ， 然 后 在 标签 选择 器 中 右 击 <body> 标 签 ， 再 单 
击 “ 设 置 类 ” 子 衣 时 中 的 background ( 上述 步骤 建立 的 CSS 样式 名 ), 应 用 样式 ， 如 图 5-13 
所 示 。 


rr 


击 wntitlea-s (xmt)y > 回忆 


100% ~ 
快速 标签 编辑 器 ... 

设置 ID 
代 玛 训 览 器 . 


Sv 无 


折 秋 标签 
折 棕 外 部 标签 


图 5-13” 右 击 sbody> 标 签 上 下 文 环 单 


08 保存 文件 完成 背景 制作 ， 按 下 F12 键 在 浏览 器 看 到 图 5-11 所 示 的 效果 。 
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5. 1.7 使 用 图 像 映射 


不 同 的 页 面 。 使 用 图 像 属性 检查 右 可 通过 图 形 方 式 创建 或 编辑 客户 端 图 像 映射 。 下 面 通过 
一 个 实例 来 说 明 如 何 使 用 图 像 映 射 ， 最 终 的 效 末 如 网 5-14 所 示 。 

0 但 新 建 一 个 文件 。 单 击 “ 插 入 ”/“ 常 用 ”面板 中 的 图 像 图 按钮 ， 在 文档 窗口 中 插 
入 图 像 。 


阅 ， 表 示 和 梓 选 中 。 再 在 文档 窗口 中 图 像 上 的 “景点 ”两 学 下 上 角 按 下 鼠标 左 键 ， 然 后 辐 右 
下 角 拖 动 孔 标 ， 下 到 出 现 的 圆 形 框 将 “景点 ”两 个 字 包 围 后 释放 上限 标 ， 第 一 个 热点 建立 完 


被 选中 。 再 在 文档 窗口 中 图 像 上 的 “ 食 宿 ” 两 个 字 的 左上 角 单 击 鼠 标 左 键 ， 加 入 一 个 定位 
点 ， 再 在 左下 角 单 击 鼠标 左 键 ， 加 入 第 二 个 定位 点 ， 这 时 两 个 定位 点 间 会 连 成 一 条 直线 。 
按 同 样 的 方法 在 右上 角 、 右 下 角 各 加 入 一 个 定位 点 ， 此 时 4 个 定位 点 会 连 成 一 个 梯形 ,将 


一 


0 人 用 在 属性 设置 面板 中 选择 “指针 热点 工具 ”按钮 此 |， 再 用 鼠标 单 击 “ 景 点 ”的 热 
点 区 域 ， 选 中 该 热点 区 域 。 单 击 属性 设置 面板 “链接 ”选项 后 面 打 开 文 件 的 图 标 ， 打 开 文 


件 选择 醋 ， 从 站 点 目录 中 选择 一 个 文件 后 ， 单 击 “ 确 定 ” 鬼 钮 确认 并 关 财 窗口 ， 超 级 链接 


87 


90 J@lqeu9 


CCGD 守 交 羽 称 准 实 创 琢 丰 


文件 的 路 径 及 文件 名 显示 在 “链接 ”后 面 的 文本 框 内 。 


08 自 执行 “文件 ”| “保存 ”命令 保存 文档 。 按 下 快捷 键 F12 在 浏览 器 中 预览 整个 


5.2 ”添加 声音 


有 多 种 不 同 疾 型 的 声音 文件 和 格式 。 将 声音 添加 到 Web 页 面 也 有 多 种 不 同 的 方法 。 
在 确定 采用 哪 一 种 格式 和 方法 洪 加 声 首 之 前 ， 需 要 考虑 以 下 一 些 因素 : 添加 声音 的 目的 、 
受众 、 文 件 大 小 、 声 首 品 质 和 不 同 浏 览 紫 的 差异 。 


5.2.1 关于 声音 


不 同类 型 的 声 首 文件 和 格式 有 各 日 不 同 的 特点 。 下 向 介绍 较为 常见 的 首 频 文件 格式 以 
及 每 一 种 格式 在 Web 设计 上 的 一 些 优 号 点 : 

> .midi 或 .mid (乐器 数学 接口 ) 格式 用 于 器 乐 。 许 多 浏览 右 都 文 持 MIDI 文件 并 且 
不 要 求 插件 。 尽 管 其 声音 品质 非 章 好 ， 但 根据 访问 者 的 声卡 的 不 同 ， 声 首 效 末 也 
会 不 同 。 很 小 的 MIDI 文件 也 可 以 提供 较 长 时 间 的 声音 甬 辑 。MIDI 文件 不 能 被 孙 
制 且 必须 使 用 和 殊 的 便 件 和 软件 在 计算 机 上 合成 。 

> .Wav (Waveform 扩展 名 ) 格式 文件 具有 较 好 的 声音 品质 ， 许 多 浏览 需 都 文 持 此 类 
格式 文件 并 且 不 要 求 插件 。 可 以 从 CD、 人 磁带 、 麦 区 风 等 录制 自己 的 WAYV 文件 。 
但 是 其 中 较 大 文件 的 大 小 严格 限制 了 可 以 在 Web 页 面 上 使 用 的 声 首 一 辑 的 长 度 。 

> .aif〈 首 频 交 换文 件 格 式 ， 即 AIFF) 格式 与 WAYV 格式 类 似 ， 也 具有 较 好 的 声音 品 
质 ， 大 多 数 浏 览 器 都 可 以 播放 它 并 且 不 要 求 插件 。 可 以 从 CD、 破 市 、 麦 克 风 等 孙 
制 AIFF 文件 。 但 是 其 中 较 大 文件 的 大 小 严格 限制 了 可 以 在 Web 页 面 上 使 用 的 声 
音 勇 辑 的 长 度 。 

> .mp3〔 运 动 图像 专 家 组 音频 ， 即 MPEG- 音 频 层 -3) 格式 是 一 种 压缩 格式 ， 它 可 令 
声音 文件 明显 缩小 ， 并 且 声 音 品 质 非 常 好 。 如 果 正 确 了 录制 和 压缩 MP3 文件 ， 其 质 
量 甚 全 可 以 和 CD 质量 相 媲 美 。 这 一 新 撤 术 可 以 对 文件 进行 “ 流 式 处 理 ”， 以 便 
访问 者 不 必 等 竺 整个 文件 下 载 完 即 可 收听 。 但 是 其 大 小 要 大 于 Real Audio 文件 ， 
因此 通过 普通 电话 线 连接 下 载 整 首 歌曲 可 能 仍 要 人 花 较 长 的 时 间 。 大 要 播放 MP3 文 
件 , 访问 者 必须 下 载 并 安装 辅助 应 用 程序 或 插件 , 例如 QuickTime、Windows Media 
Player 或 RealPlayer。 

> .Ia、.ram、.Ipm 或 Real Audio 格式 共有 非 营 高 的 压缩 程度 ， 文 件 大 小 要 小 于 MP3。 
全 部 歌曲 文件 可 以 在 合理 的 时 间 冰 围 内 下 载 。 因 为 可 以 在 普通 的 Web 服务 器 上 对 
这 些 文 件 进 行 “ 流 式 处 理 ”， 上 所 以 访问 者 在 文件 完全 下 载 完 之 前 即 可 上 听 到 声音 。 
其 声音 品质 比 MP3 文件 声音 品质 要 兰 ， 但 新 推出 的 播放 需 和 编码 需 在 声音 品质 方 
面 已 有 显著 改善 。 访 问 者 必须 下 载 并 安装 RealPlayer 辅助 应 用 程序 或 插件 才 可 以 
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播放 这 些 文件 。 
5.2.2 链接 到 音频 文件 


链接 到 音频 文件 是 将 声音 添加 到 Web 页 面 的 一 种 简单 而 有 效 的 方法 。 这 种 集成 声音 
文件 的 方法 可 以 使 访问 者 能 够 选择 是 侍 要 收听 该 文件 ， 并 且 使 文件 可 用 于 最 广汽 围 的 观 
fs 

下 和 面 通 过 创建 一 个 简单 的 例子 , 演示 链接 到 首 频 文件 的 具体 操作 ,最终 的 创建 效 末 如 
图 5-16 所 示 。 

1 县 新建 文件 ， 输 入 并 格式 化 图 中 的 文字 。 

02 选中 “1. 好 一 条 莱 莉 花 ”在 属性 检查 器 中 ， 单 击 文 件 夹 图 标 浏览 找到 音频 文件 ， 
或 者 在 “链接 ” 域 中 键入 文件 的 路 径 和 名 称 。 

0 入 保存 文件 完成 链接 到 音频 文件 的 创建 ， 可 以 按 下 F12 在 浏览 器 中 观察 创建 的 结 
朵 。 单 击 链 接 “1. 好 一 示 来 利 伦 ”后 会 打开 相应 的 媒体 播放 此 播放 首 乐 。 显示 效果 如 图 5-17 
所 示 。 

吾 Untitled Docuae--- 攻 | 后 | 医 | 


文件 人 ) ”编辑 下 ) 查看 0 ”局 


歌曲 列表 


1. 好 一 未 薪 杂 本 


图 5-16 ”链接 到 音乐 文件 图 5-17 款 认 用 WINAMP 播放 音乐 


5.2.3 几 入 音乐 文件 


典 入 音频 将 声音 播放 器 直接 并 入 页 面 中 ， 但 只 有 在 具有 所 选 声音 文件 的 适当 插件 后 ， 
声音 才 可 以 播放 。 如 果 要 将 声音 用 作 背 景 音 乐 ， 或 者 要 对 声音 演示 本 身 进 行 更 多 控制 ， 则 
可 以 嵌入 文件 。 例 如， 可 以 设置 音量 、 播 放 器 在 页 面 上 显示 的 方式 以 及 声音 文件 的 开始 点 
和 结束 点 。 

下 面 通过 一 个 简单 实例 演示 背景 音乐 的 制作 方法 。 最 终 的 创建 效果 如 图 5-18 所 示 。 

01.5 新 建文 要 ， 在 设计 视图 输入 所 需 文字 。 

02 在 “设计 ” 视 岁 中 ， 将 插入 点 放置 在 要 人 藤 入 文件 的 地 方 ， 执 行 “ 插 入 ”| “ 媒 
体 ”| “插件 ”命令 ， 或 者 在 “插入 ”浮动 面板 中 ， 切 换 到 “常用 ”面板 ， 然 后 单 击 图 标 
站 -弹出 下 拉 菜 单 ， 如 图 5-19 所 示 。 

03 在 弹出 的 下 拉 菜 单 中 单 击 “插件 ” 弹出 “选择 文件 ”对 话 框 如 图 5-20 所 示 。 

04 选择 想 要 的 音乐 文件 ， 单 击 “ 确 定 ” 完 成 插入 插件 。 

05 在 属性 检查 器 中 ， 单 击 “ 参 数 ” 按 钮 ， 弹 出 “参数 ”对 话 框 如 图 5-21 所 示 。 

0 人 5 单 击 对 话 框 上 的 “十 ”按钮 ， 在 “参数 ” 列 中 输入 参数 的 名 称 “Autostart”。 在 
“ 值 ” 列 中 输入 该 参数 的 值 “true”。 输 入 完毕 后 单 击 “确定 ”。 

07 执行 “文件 ”| “保存 ”命令 ， 保 存 文档 。 按 下 快捷 键 F12 在 浏览 器 中 预览 整 
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砚 如 c 浴 


像 
和 
媒 
体 


水 


中 六 般 称 准 实 创 私 布 


个 页 面 ， 这 时 音乐 会 自动 播放 . 


| 
1 ey 
t 0 ~ 音乐 ... | 
请 听 背 景 音乐 i ry 
] we Dee 【jp (> | 
eoOe Se | ly Shocky awve 


pe D 迪 ) PPLET 
时 参数 


Eb hetiwen 
引 8 插件 
图 5-18 ”实例 效 末 图 5-19 ”媒体 采 单 


选 职 文件 名 自 @) 文件 系统 站 点 和 服务 器 .. 
C 〇 数据 源 


查找 范围 区 :| 回 bak v| 5 


和 外]TWFP2birxo5zaz. htm 
忽 ]Untitled-1.htm 


文件 名 四: | 四 本 
文件 类 型 多): | 所 有 文件 tt 和 v 


URL.: (file: /IC |/Documents and Settings/ comey,/: 


相对 于 : 文档 ww Untitled-1.htm 


图 5-20 “选择 文件 ”对 话 框 图 5-21 “参数 ”对 话 框 


按 默认 方式 ， 音 乐 具 播放 一 次 。 如 果 想 让 音乐 循环 播放 ， 并 且 网 页 中 不 显示 播放 器 ， 
则 可 以 在 第 6 步 中 增加 两 个 参数 ， HIDDEN 值 TRUE; LOOP 值 TRUE。 


“提示: 浏览 器 不 同 ， 处 理 声 音 文件 的 方式 也 会 有 不 一 致 的 地 方 。 最 好 将 声音 文件 
添加 到 Flash 影片 ， 然 后 嵌入 SWF 文件 以 改善 一 致 性 。 


本 一 | 


5.3 添加 Shockwave 电影 


DD 

® 

她 Shockwave 作为 Web 上 用 于 交互 式 多 媒体 的 标准 ， 是 一 种 经 压缩 的 格式 。 它 可 以 使 
合 在 Director 中 创建 的 多 媒体 文件 能 够 被 快 速 下 载 , 而 且 可 以 在 大 多 数 香 用 浏览 夯 中 进行 播 
一 人 

OO 

(@l 


放 。 播放 Shockwave 影片 的 软件 既 可 作为 Netscape Navigator 插件 提供 ,也 可 作为 ActiveX 
控件 提供 。 


5.3.1 插入 Shockwave 电影 


Shockwave 是 一 种 插件 ， 是 一 种 利用 Director 开发 的 可 以 在 浏览 右 内 浏览 的 相关 文件 
格式 。 
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当 插 入 Shockwave 影片 时 ，Dreamweaver 同时 使 用 object 标记 (用 于 ActiveX 控件 ) 
和 embed 标记 《用 于 插件 ) 以 在 所 有 浏览 器 中 都 获得 最 
佳 效 果 。 当 在 属性 检查 器 中 对 影片 进行 更 改 时 ，。 Els 


交 件 还) 编辑 人 ) 查看 WW) 收藏 4 ” 链接 


Dreamweaver 会 将 采用 的 各 项 映射 为 object 和 embed 标 
记 的 适当 参数 。 
下 和 而 通过 一 个 实例 渤 示 了 在 文档 中 搬入 Shockwave 
电影 的 具体 操作 ， 最 终 的 创建 效果 如 图 5-22 所 未 。 
本 例 执行 以 下 操作 : 
01 在 “设计 ”视图 中 ， 将 插入 点 放置 在 要 插入 
Shockwave 影 记 的 地 方 。 图 5-22 ”实例 效果 
02 执行 “插入 ”| “媒体 ”| “Shockwave” 命 
令 ， 或 者 在 “搬入 ”浮动 面板 中 ， 切 换 到 “常用 ”面板 ， 然 后 单 击 图 标 前 :弹出 下 拉 荣 单 。 
在 下 拉 菜 单 中 单 击 确 sses。 ， 弹 出 “选择 文件 ”对 话 杠 ， 如 图 5-23 所 示 。 
039 在 显示 的 对 话 框 中 ， 选 择 一 个 有 影片 文件 。 
04， 在 属性 检查 器 中 ， 在 “ 宽 ” 和 “高 ” 框 中 分 别 输入 影片 的 党 度 400 和 高 度 300。 
03， 选中 Shockwave 对 象 ， 单 击 属 性 面板 上 的 “参数 ”按钮 ， 弹 出 “参数 ”对 话 框 ， 
输入 参数 “AutoStart” 和 “Sound”， 值 均 为 tue。 对 话 框 各 参数 的 设置 见 图 5-24 所 示 。 


地 5S 坦 


选取 文件 名 自 @@) 文件 系统 站 点 和 服务 器 .. . 
〇 数据 源 


查找 范围 ([): | 回 bak | 让 加- 图 
[BB mmserverSeripts 起]Unti tled-l. htm 像 
Commections 回 爱 的 代价 . mp3 
| 高 ] buttonl， swt 不 
钨 |]music. htn EFI 
| 高 ] succes . SWE - h 
钨 |]THP4sz8zoB2iw. htm 区 ;本 

AutoStart 

文件 名 四 :| | 
文件 类 型 区): | 所 有 文件 人 kf. 4) v| 
URL (Eile: {IC |/Documents and Settings/ comey/:| 
相对 于 文档 | music. htm 

图 5-23 “选择 文件 ”对 话 框 图 5-24 “参数 ”对 话 框 


5. 3.2 ”设置 Shockwave 属性 
插入 Shockwave 电影 后 ， 选 中 Shockwave 对 象 ， 这 时 属性 检查 器 如 图 5-25 所 示 。 


尾 性 
缚 Ee 宽 抽 32 况 件 灾 ) follow_your_dream.wma 人 地 [me 瑶 县 颜色 (&) [ml el 四 © 
高 HM) 32 ED 
垂直 边 距 &) 对 这 凶 默认 值 。 || 
水 平 边 距 外 ) a 


图 5-25 ”Shockwave 属性 检查 器 


“Shockwave”: 指定 用 于 标识 Shockwave 对 象 ， 以 进行 脚本 撰写 的 名 称 。 
“和 守 ” 和 “高 ”: 以 像素 为 单位 指定 Shockwave 对 象 的 宽度 和 高 度 。 
“文件 ”: 指 问 Shockwave 对 象 文 件 的 路 径 。 
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BMV (CEAXB 区 仙人 得 狂 实例 及 这 
> “ “背景 斋 色 ”: 指定 Shockwave 对 和 象 播 放 时 的 背景 应 色 。 
> “类 ”选择 应 用 于 Flash 按钮 的 CSS 样式 。 
> ““ 重 和 直 边 中 ”和 “水 平 边 距 ”: 指定 Shockwave 对 象 上 、 下 、 左 、 右 空白 的 像素 
> “对 齐 ”; 定义 Shockwave 对 象 在 页 面 上 的 对 齐 方式 。 
“播放 / 俘 止 2 : 可 以 在 文档 窗口 中 预 筑 /结束 了 预 急 Shockwave 对 象 。 单 击 绿色 的 “ 播 
放 ” 按 钮 可 以 播放 模 陈 奏 看 对 象 ， 单 击 红 色 的 “ 俘 止 ”按钮 可 以 结束 播放 。 
> “参数 ”:; 单 击 该 按钮 打开 “参数 ”对 话 框 ， 可 以 在 其 中 输入 附加 参数 。 


5.4 ActiveX 控件 


Vv 


ActiveX 控件 (以 前 称 作 OLE 控件 ) 是 可 以 充当 浏览 器 插件 的 可 重复 使 用 的 组 件 ， 有 
些 像 微型 的 应 用 程序 。ActiveX 控件 在 Windows 系统 上 的 Internet Explorer 中 运行 ， 但 它 
们 不 在 Macintosh 系统 上 或 Netscape Navigator 中 运行 。 Dreamweaver 中 的 ActiveX 对 象 可 
为 访问 者 的 浏览 器 中 的 ActiveX 控件 提供 属性 和 参数 。 


5.4.1 插入 ActiveX 控件 


下 面 通过 打开 页 面 时 目 动 播放 ActiveX 控件 中 Flash 动画 的 例子 介绍 在 文档 中 插入 
ActiveX 控件 的 其 体操 作 ， 最 终 的 创建 效果 如 图 5-26 所 示 。 
(1) 在 设计 视图 中 ， 将 插入 点 放置 在 要 插入 ActiveX 控件 的 地 方 。 
(2) 执行 “插入 ”| “媒体 ”| “ActiveX” 命 令 ， 或 者 在 “搬入 ”浮动 面板 中 ， 切 
换 到 “常用 ”面板 ， 然 后 单 击 图 标 包 "弹出 下 拉 菜 单 ， 在 下 拉 菜 单 中 单 击 忌 tivat ， 插 入 
ActiveX 控件 。 
与 插入 其 他 对 象 不 同 ， 插 入 ActiveX 控件 后 不 会 出 现 对 话 框 ， 而 是 直接 在 文档 窗口 中 
添加 一 个 ActiveX 控件 图 标 , 如 图 5-27 所 示 。 出 现 的 图 标 标 记 出 Internet Explorer 中 ActiveX 
控件 将 在 页 面 上 出 现 的 位 置 。 


并 伴 里 】 山 晤 下 查看 下 1) 由 醒 是 1 工具 江 1 和 是 
国 国 的 | 只 轩 二 wm 


击 wiitled-l [XHTNHL)* a 


Mboroeoll z 
As Windows > 一 


<body> <p> 100% ”~v| 国 


图 5-26 ”实例 效果 图 5-27 ActiveX 控件 的 显示 
(3) 选中 ActiveX 控件 属性 面板 上 的 “先入 ” 复 选 枉 ， 单 击 “ 源 文件 ”右边 文件 夹 
图 标 品 ， 弹 出 “选择 Netscape 插件 文件 ”对 话 框 。 
Es 在 出 现 的 对 话 框 中 选择 文件 。 单 击 “ 确 定 ” 按 钮 保存 文件 。 人 至 此 文档 创建 完毕 。 
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可 以 按 下 快捷 键 F12 在 浏览 器 中 预览 整个 页 面 。 
5.4. 2 ”设置 ActiveX 属性 


在 插入 ActiveX 控件 后 ， 可 使 用 属性 检查 右 设 置 ActiveX 控件 的 属性 以 及 参数 。 在 属 
性 检查 器 中 蛙 击 “参数 ”， 输 入 没有 在 属性 检查 右 中 显示 的 属性 的 名 称 和 值 。 现 在 沿 没 有 
用 于 ActiveX 控件 参数 的 广泛 接受 标准 格式 。 选 中 ActiveX 控件 的 属性 检查 器， 如 图 5-28 
所 示 。 与 Shockwave 对 象 意 义 相同 的 参数 在 这 里 不 再 壮 述 ， 其 余 参 数 介绍 如 下 : 


加 ActiveX 宽 0) 32 ssID(C) | 六 | - 对 六 由 | 默认 值 ”|v| 类 名 | 无 v| 
SE 高 32 | 嵌入 他) 门 源 文件 (5) | 

土 直 过 中 久 ) 其 址 @B) 

水 平 边 距 到 ) ID I) 数据 0) 替换 图 像 (Tf) 百 


图 5-28 ActiveX 控件 的 属性 检查 器 


> ActiveX: 指定 用 来 标识 ActiveX 控件 以 进行 脚本 搂 写 的 名 称 。 在 属性 检查 堪 最 左 
侧 的 未 标记 域 中 输入 名 称 。 

> “ClassID”: 为 浏览 右 标 识 ActiveX 控件 。 输 入 一 个 值 或 从 弹出 式 来 单 中 选择 一 
个 值 。 

在 加 载 页 面 时 ， 浏 览 句 使 用 该 类 ID 来 确定 与 该 页 面 关联 的 ActiveX 控件 所 需 的 
ActiveX 控件 的 位 置 。 如 果 浏 览 右 未 找到 指定 的 ActiveX 控件 ， 它 将 尝试 从 “ 基 址 ”指定 
的 位 置 中 下 载 它 。 

> “ 骸 入 ”: 为 该 ActiveX 控件 在 object 标记 内 添加 embed 标记 。 

如 果 ActiveX 控件 具有 等 效 的 Netscape Navigator 插件 ， 则 embed 标记 激活 该 插件 。 
Dreamweaver 将 作为 ActiveX 属性 的 输入 值 指派 给 等 效 的 Netscape Navigator 插件 。 

> ““ 源 文件 ”: 如 果 尼 用 了 “ 藤 入 ”选项 ， 定 义 将 要 用 于 Netscape Navigator 插件 的 

数据 文件 。 如 果 没 有 输入 值 ， 则 Dreamweaver 将 尝试 根据 已 输入 的 ActiveX 属性 
确定 该 值 。 

> “ 基 址 ”: 指定 包含 该 ActiveX 控件 的 URL。 

如 果 在 访 问 者 的 系统 中 尚未 安装 ActiveX 控件 ， 则 Internet Explorer 从 该 位 置 下 载 它 。 
如 果 没 有 指定 “其 址 ”参数 并 且 如 果 访 问 者 尚未 安 状 相 应 的 ActiveX 控件 ， 则 浏览 右 不 能 
显示 ActiveX 对 和 象 。 

> “数据 ”: 为 要 加 载 的 ActiveX 控件 指定 数据 文件 。 许 多 ActiveX 控件 (例如 

Shockwave 和 RealPlayer) 不 使 用 此 参数 。 

> “ 蔡 换 图 像 ”: 指定 在 浏览 噩 不 文 持 object 标记 的 情况 下 要 显示 的 图 像 。 

只 有 在 取消 对 “ 骸 入 ”选项 的 选择 后 此 选项 才 可 用 。 

> : 单 击 该 按钮 可 以 在 文档 窗口 中 预览 ActiveX 控件 ， 此 时 按钮 变 为 

。 单 击 “ 停 止 ”按钮 可 以 结束 播放 。 
> “参数 ” 按 包 可 以 打开 “参数 ”对 话 框 ， 在 其 中 输入 附加 参数 ， 
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Terra (AS 让 区 航 系 准 :六 -有 
5.5 ”添加 Java applets 
Java 是 一 种 编程 语言 ， 通 过 和 它 开 发 可 通 入 Web 页 中 的 小 型 应 用 程序 (applets)。 在 创 


建 了 Java applets 后 ， 可 以 使 用 Dreamweaver 将 其 插入 HIML 文档 中 。Dreamweaver 使 用 
applet 标记 来 标识 对 此 applets 文件 的 引用 。 


5.5.1 插入 Java applets 


下 和 而 通过 示例 演示 在 文档 插入 Java applets 的 具体 操 = 了 二 
、 ~ < 、 Untitled Docu... > 
作 ， 最 终 的 效果 是 在 页 面 显示 一 个 不 断 跳动 的 时 钟 ， 如 图 。 sss 


5-29 所 示 。 
0 人 5 在 “设计 ”视图 中 ， 将 插入 点 放置 在 要 插入 Java 人 3 
applets 控件 的 地 方 。 NU ， 
02 昌 执行 “插入 ”| “媒体 ” | “Applet” 命 令 ， 或 十 月 11 16:20:00 2003 
者 在 “插入 ”浮动 面板 中 ， 激 活 “种 用 ”和 面板 ， 然 后 单 击 ET 


图 标 蚀 -弹出 下 拉 菜 单 , 在 下 拉 菜 单 中 单 击 包 sl 打开 “ 选 
择 文 件 ” 对 话 框 。 

03 在 出 现 的 对 话 框 中 ， 选 择 包 含 Java applets 的 文件 Clock2.class。 单 击 “ 确 定 ” 
按钮 保存 文件 。 人 至 此 文件 创建 完毕 。 可 以 按 下 快捷 键 F12 在 浏览 器 中 预 时 整个 页 面 。 


图 5-29 ”示例 效果 


5.5.2 设置 Java applets 属性 


插入 Java applets 后 ， 选 中 Java applets 对 象 ， 这 时 属性 检查 如 如 图 5-30 所 示 。 其 中 各 
个 参数 与 ActiveX 对 象 的 参数 意义 大 致 相同 ， 这 里 不 再 悍 述 ， 特 点 参数 介绍 如 下 : 


属性 wwe 


Applet 名 称 ， 宽 亿 ] 32 代码 (CY Clock2. class 已 对 齐 允 ) | 默认 值 四 类 避 ) | 无 国 © 

= = \ -> 

高 O32 ”| 莽 址 (8) 蔡 换 (I) 过 
垂直 边 距 心 ) 

水 平 边 距 (&) 2 


图 5-30 ”Java applets 控件 的 属性 


> “Applet 名 称 ”: 指定 用 来 标识 applets 以 进行 脚本 撰写 的 名 称 。 在 属性 检查 器 最 
左 侧 的 未 标记 域 中 输入 名 称 。 

> “代码 ”; 指定 包含 该 applets 的 Java 代 人 码 的 文件 。 单 击 文件 夹 图 标 浏览 选择 某 一 
文件 ， 或 者 直接 输入 文件 名 。 

> ““ 基 址 ”: 标识 包含 选 定 applets 的 文件 来。 在 选择 了 一 个 applets 后 ， 此 域 被 目 动 
填充 。 


5.6 添加 Flash 视频 内 容 


Dreamweaver CS6 支持 Flash 视频 ,可 以 快速 便捷 地 将 Flash 视频 文件 插入 Web 页 ， 
而 无 需 使 用 Flash 创作 工具 ,将 Flash 视频 文件 插入 页 面 后 , 用户 还 可 以 在 Dreamweaver 
94 


CS6 全 狐 的 实时 视图 中 播放 FLV 影 记 。 

在 Dreamweaver 页 面 中 插入 Flash 视频 内 容 之 前 ， 必 须 有 一 个 经 过 编码 的 Flash 视 
频 (FLV) 文件 ， 访 文件 可 以 使 用 两 种 编 解 但 堪 Sorenson Squeeze 和 On2 创建 。 在 
Dreamweaver CS6 中 插入 Flash 视频 文件 后 ， 可 以 在 页 和 面 中 插入 有 关 代 人 码 ， 以 检测 用 户 是 
否 拥 有 但 看 Flash 视频 所 需 的 正确 Flash Player 版 本 。 如果 没 有 正确 的 版 本 ,， 则 会 提示 用 
户 下 载 Flash Player 的 最 狐 版 本 。 此 外 ， 在 Dreamweaver CS6 中 ， 只 需要 通过 轻松 点 击 或 
编写 符合 标准 的 编码 即 可 将 FLV 文件 集成 到 任何 网 页 中 ， 无 需 Adobe Flash 软件 知识 。 


5.6.1 插入 Flash 视频 内 容 


若 要 在 Web 页 中 插入 Flash 视频 ， 执 行 以 下 操作 : 
(1) 选择 “插入 ”|“ 媒 体 ”|“FLYV”， 弹 出 如 图 5-31 所 示 的 对 话 框 。 


调频 兴 型 : | 果 进 式 下 载 视 蝴 


Ui.: 
1 TIY 六 赃 交 咎 齐 瑟 将 芝 
中 纲目 sar Skin 1 i 是 小 南 苇 101 
BE 吓 加 吓 
Eu 图 亲 册 高 富 比 【 粒 乔 志 直 | 
两 归 ， 但 据 针 观 


加 =F 
[|] 犁 动量 杂 晨 履 


oy DD 要 观看 议 规 ,请 在 壮 泡 毅 中 移 先 页 面 。 


图 5-31 “插入 FLY” 对 话 框 
(2) 在 对 话 框 中 ， 从 “视频 类 型 ”弹出 式 来 单 中 选择 “累进 式 下 载 视频 ”或 “ 流 视 


频 ”。 
> “累进 式 下 载 视频 将 Flash 视频 (FLV) 文件 下 载 到 站 点 访问 者 的 便 盘 上 ， 然 
后 播放 。 但 是 ， 与 传统 的 “下 载 并 播放 ”视频 传送 方法 不 同 ， 渐 进 式 下 载 允 许 在 
下 载 完 成 之 前 束 开 始 播 放 视 频 文件 。 
> “ 流 视频 ”*， 对 Flash 视频 内 容 进行 流 式 处 理 ， 并 在 一 段 很 短 时 间 的 绥 冲 (可 确 
保 流畅 播放 ) 后 在 Web 页 上 播放 该 内 容 。 奉 要 在 Web 页 上 局 用 流 视 频 ， 必 须 
具有 访问 Adobe Flash Communication Server 的 权限 。 
(3) 在 “URL” 文 本 框 中 键入 Flash 视频 的 相对 路 径 或 绝对 路 径 。 
(4) 在 “外 观 ” 下 拉 采 时 中 指定 Flash 视频 组 件 的 外 观 。 所 选 外 观 的 预览 会 出 现在 
“外 观 ” 弹 出 菜单 下 方 。 
(5) 在 “和 宽度 ”和 “ 蜗 度 ”文本 框 中 以 像 取 为 单位 指定 FLY 文件 的 宽度 和 高 度 。 
(6) 早 击 “检测 大 小 ”按钮 ，Dreamweaver 可 以 帮助 用 户 确 定 FLV 文件 的 准确 宽度 
或 局 度 。 如 果 Dreamweaver 无 法 人 硝 定 宽度 或 蜗 度 ， 则 用 户 必须 键入 宽度 或 蜗 度 值 。 
(7) 选中 “限制 高 宽 比 ” 复 选 枉 ， 则 保持 Flash 视频 组 件 的 宽度 和 高 上 度 的 比例 不 变 。 
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Das mv CAE SP 吕 伍 准 六 
驮 认 情 况 下 选择 此 选项 。 
设置 宽度 、 高 度 和 外 观 后 ,“ 包 括 外 观 ” 后 将 目 动 显示 ELV 文件 的 宽度 和 融 度 与 所 选 
外 观 的 宽度 和 高 度 相 加 得 出 的 和 。 
(8) 选中 “ 目 动 播放 ” 复 选 枉 ， 则 Web 页 面 打开 时 目 动 播放 视频 。 
(9) 选中 “ 目 动 重新 播放 ” 复 选 征 ， 则 播放 控件 在 视频 播放 守之 后 返回 到 起 始 位 置 。 
(10) 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 并 将 Flash 视频 内 容 添 加 到 Web 页 面 。 
如 果 决 定 从 页 面 中 删除 Flash 视频 ， 则 不 再 需要 检测 代码 。 可 以 使 用 Dreamweaver 
将 其 删除 。 选 择 “命令 ”| “删除 Flash 视频 检测 ”。 


5.6.2 修改 Flash 视频 属性 


和 要 在 Web 页 和 面 中 更 改 Flash 视频 内 容 的 设置 ， 必 须 在 Dreamweaver 的 “文档 ” 
窗口 中 选择 Flash 视频 组 件 占 位 人 符 并 使 用 属性 检查 器 ， 或 者 通过 选择 “插入 ”|“ 媒 体 ”| 
“Flash 视频 ”来 删除 Flash 视频 组 件 并 重新 插入 它 。 

要 修改 Flash 视频 属性 ， 请 执行 以 下 步骤 : 

(1) 在 “文档 ”窗口 中 ， 单 击 Flash 视频 组 件 占 位 符 中 央 的 Flash 视频 图 标 选 择 该 
占 位 符 。 

(2) 打开 属性 检查 絮 进 行 更 改 。 

属性 检查 器 中 的 选项 与 “搬入 Flash 视频 ”对 话 框 中 的 选项 类 似 ， 在 此 不 再 资 述 。 

区 注意 

2 不 能 使 用 属性 检查 器 更 改 视频 类 型 (例如 ， 从 累进 式 下 载 更 改 为 流 式 下 

载 )， 若 要 更 改 视频 类 型 ， 必 须 删除 Flash 视频 组 件 ， 然 后 通过 选择 “插入 ”| “ 媒 

体 ”| “FLV” 来 重新 插入 它 。 


> 


5.7 动手 练 一 练 


1. 新 建 一 个 网 页 ， 为 网 页 设置 水 平 乎 铺 或 垂 二 平 铺 育 景 图 像 。 

2. 在 文档 中 插入 一 张 岁 价 ， 将 此 图 像 链接 到 一 个 熟悉 的 网 站 。 

3. 在 文档 中 插入 一 行文 本 , 文本 内 容 设 置 为 东 一 首 音 乐 的 名 字 ， 并 将 文本 链接 到 相 
应 的 音乐 文件 。 


4. 为 一 个 网 页 仍 入 背景 音乐 。 设 置 音乐 为 循环 播放 ， 并 且 网 页 中 隐藏 播放 从 。 
5.8 ”思考 题 


.网 页 中 第 用 的 图 瞩 文 件 乎 式 有 哪些 ?” 它们 各 有 什么 优 缺 点 ? 
2. 网 页 中 名 用 的 声音 文件 格式 有 哪些 ? 它们 各 有 什么 优 缺 点 ? 
3. ”能 用 儿 种 方法 在 页 和 面 中 给 入 首 乐 文件 ? 


96 


| 出 表格 数据 到 文本 文件 等 。 
| 


E Adobe Dreamweaver C6 


国 ”插入 表格 

@@ 对 表格 进行 各 种 操作 

图 导入 、 寻 出 表格 数据 

@@ 利用 表格 技术 对 页 面 进行 布局 


ON 


a 


”本章 将 介绍 表格 的 作用 及 使 用 方法 。 内 容 包 括 : 有 关 表 格 的 操作 , 如 插 ， 
入 表格 、 格 式 化 表格 、 拆 分 与 合并 单元 格 、 剪 切 和 粘 帖 单元 格 、 删 除 行列 以 ， 
及 插入 行 等 操作 ,表格 和 单元 格 属性 的 设置 ， 以 及 导入 文本 数据 到 表格 和 输 ， 
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6.1 表格 概述 


表格 在 Web 网 页 中 占据 了 重要 的 地 位 ， 它 对 于 制作 Web 页 面 是 不 可 或 缺 的 。 在 整个 
网 页 元 系 空 间 编排 上 都 发 挥 看 重要 的 作用 。 


6.1.1 表格 概述 


表格 在 HTML 语言 中 是 较 难 掌握 的 一 个 标识 从 ， 但 是 Dreamweaver CS6 为 读者 提供 
了 强大 的 表格 编辑 功能 ， 使 用 户 可 以 轻松 地 实现 对 表格 的 控制 。 

在 HTML 中 ， 表 格 是 很 多 优秀 站 点 设计 的 整体 标准 ， 用 表格 格式 化 的 页 面 在 不 同 平 
合 ， 不 同 分 辨认 的 浏览 句 里 都 能 保持 布局 和 对 齐 。 

表格 可 以 将 数据 、 文 本 、 图 厂 规范 显示 在 页 面 上 ， 避 人 免 杂 乱 无 革 。 不 过 它 在 制作 Web 
页 面 时 的 用 途 远 不 止 于 此 。 它 的 更 大 用 处 在 于 精准 控制 页 面 元 素 位 置 。 网 页 制作 者 常 弟 把 
整个 页 面 中 的 内 容 都 放 在 表格 中 ， 用 表格 来 规范 它们 的 位 置 ， 然 后 令 表 格 的 边线 不 可 见 ， 
这 种 方法 设计 出 版 式 漂 带 的 页 耐 , 已 经 超出 表格 本 里 的 意义 。 合 并 、 拆 分 单元 格 和 岗 僚 表 
格 的 技术 可 以 实现 复杂 的 设计 。 表 格 还 具有 规范 、 灵 活 的 特点 。 正 是 因为 这 些 原 因 ， 表 格 
在 网 页 制作 过 程 中 扮演 看 重要 的 角色 。 事 实 上 ， 国 内 外 的 许多 大 型 网 站 的 页 面 ， 都 应 用 到 
了 表格 定位 技术 。 

使 用 表格 技术 能 使 网 页 变 得 更 加 清楚 ,使 人 看 起 来 更 加 有 条 理 、 更 加 美观 。 但 它 的 使 
用 有 一 个 小 小 的 缺陷 : 它 会 使 网 页 显示 的 速度 变 慢 。 这 是 因为 在 浏览 器 中 一 般 的 文字 是 逐 
行 显 示 的 ， 即 文字 从 服务 器 上 传 过 来 ， 尽 管 不 全 ， 但 它 还 是 会 将 传 到 的 部 分 显示 出 来 ， 以 
方便 浏览 。 而 使 用 表格 束 不 同 了 ， 表 格 一 定 要 等 到 整个 表格 的 内 容 全 部 传 过 来 之 后 ， 才 能 
在 客户 端的 浏览 右上 显示 出 来 。 即 表格 是 一 整 块 出 现 的 。 


6.1.2 表格 的 基本 组 成 


一 般 第 见 的 表格 如 图 6-1 所 示 ， 古 由 一 些 锌 线条 分 开 的 小 格 所 组 成 的 ， 每 个 小 格 就 是 
一 个 单元 格 ， 这 些 线条 也 就 是 表格 的 边框 。 表 格 一 般 被 划分 为 单元 格 、 行 和 列 3 部 分 。 单 
元 格 是 表格 的 基本 部 分 ， 它 们 是 被 边框 分 割 开 来 的 区 域 ， 文 字 、 图 像 等 对 象 均 可 根据 需要 
插入 到 相应 的 单元 格 中 。 位 于 水 平方 同上 的 一 行 单元 格 称 作 一 行 ,位 于 垂直 方 同 上 的 一 列 
单元 格 称 作 一 列 。 表 格 是 可 以 租 套 的 元 素 , 在 Dreamweaver CS6 中 创建 表格 是 一 件 轻松 容 
易 的 事情 。 


单元 格 | 
工 一 一 
[| 
一 | | | 


图 6-1 表格 的 其 本 结构 
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6.2 创建 表格 


6. 2. 1 创建 表格 、 单 元 格 
下 面 以 在 网 页 中 插入 一 个 3 行 3 列 的 表格 为 例 , 介绍 在 网 页 中 创建 一 个 表格 的 具体 操 


作 步 又。 

0 人 在 “插入 ”面板 〈 如 果 没 显示 插入 面板 ， 执 行 “ 窗 口 ”|“ 揪 入 ”命令 ， 出 现 
“插入 ”面板 )， 单 击 插入 栏 上 的 “各 用 ”标签 ， 切 换 到 “和 钟 用 ”插入 面板 。 

0 入 单 击 “ 表 格 ” 图 标 按钮 于 ， 或 执行 “插入 ” | “表格 ”命令 。 弹 出 “表格 ”对 
话 框 ， 如 图 6-2 所 示 。 


辅助 功能 


标题 : | 
摘要 : | 


图 6-2 “表格 ”对 话 框 


对 话 框 中 各 个 选项 的 功能 介绍 如 下 : 

> “ 行 数 ”: 用 于 设置 表格 的 行 数 。 

>  “ 列 ”: 用 于 设置 表格 的 列 数 。 

> “表格 宽度 ”: 用 于 设置 表格 的 宽度 。 

后 面 的 下 拉 列 表 用 于 设 症 表格 宽度 数字 的 单位 有 “像素 ”和 “上 分 比 ”两 种 。 像 系 和 
百分比 两 种 单位 的 区 别 在 于 , 以 像素 为 单位 设置 的 表格 宽度 是 表格 的 实际 宽度 , 是 固定 的 ; 
而 用 百分比 方式 设 定 的 表格 宽度 ， 其 宽度 将 随 浏览 天 窗口 的 大 小 改变 而 改变 。 

> “ “边框 粗细 ”: 用 于 设 症 表 格 的 边框 厚度 ， 以 像素 为 单位 。 设 置 为 0 时 将 不 显示 

边框 。 
“单元 格 边 距 ”: 用 于 设 症 表格 内 单元 格 的 内 容 和 边框 的 间距 。 
“单元 格 间 距 ”; 用 于 设置 表格 内 单元 格 间 的 距离 , 相当 于 设 管 单 元 格 的 边框 厚 。 

> “标题 ”: 用 于 设置 标题 显示 方式 ， 有 4 个 选项 分 列 是 ， “无 ”、“ 左 ”、“ 顶 

部 ”和 “两 者 ”， 具 体 效 来 见 相应 的 图 标 ， 可 以 反击 图 标 选 中 其 一 。 
> “标题 ”: 用 于 设置 表格 的 标题 。 


六 尘 区 席 灵 9 进 


reemovyoeevar (TS 已 守 文 股票 淮 袜 创 录 币 
> “ “摘要 ”: 用 于 设置 表格 的 说 明 等 消息 ， 对 表格 的 显示 无 影响 。 
03 在 “ 行 数 ”文本 框 中 输入 表格 的 行 数 3。 在 “ 列 ” 文 本 框 中 输入 表格 的 列 数 3， 
“标题 ”选择 “项 部 ” 在 “标题 ”文本 框 输入 “第 一 张 表 格 ” 其 余 选 项 保持 默认 值 。 
04. 单 击 “确定 ”按钮 完成 插入 表格 ， 最 终 制 作 结果 如 图 6-3 所 示 。 


辐 遇 未:。， “边框 粗细 ”文本 框 中 输入 表格 边框 的 宽度 ， 表 格 中 单元 格 的 边框 不 受 


6. 2.2 创建 能 套 表格 


航 套 表格 是 在 另 一 个 表格 的 单元 格 中 的 表格 。 可 以 像 对 其 他 任何 表格 一 样 对 花 套 表格 
进行 格式 设置 ， 但 其 宽度 受 它 所 在 单元 格 的 宽度 的 限制 。 

铝 要 在 表格 单元 格 中 内 套 表格 ， 可 以 单 击 现 有 表格 中 的 一 个 单元 格 ， 再 在 单元 格 插入 
表格 。 例 如 , 在 一 个 3 行 3 列 的 表格 的 中 间 单 元 格 中 插入 个 3 行 3 列 的 表格 束 形 成 一 个 如 
图 6-4 所 示 的 般 套 表格 。 


图 6.4 ， 稚 套 表格 
6.3 ”操作 表格 


6. 3.1 选 定 表 格 对 象 


在 对 表格 进行 操作 之 前 ， 必 须 先 选中 表格 元 素 。 可 以 一 次 选中 整个 表格 、 一 行 表 格 单 
元 、 一 列表 格 单元 或 者 儿 个 连续 的 表格 单元 。 

(1) 选择 整个 表格 的 方法 如 下 : 将 光标 放置 在 表格 的 任 一 单元 格 中 ， 然 后 通过 在 文 
档 窗口 底部 的 标签 选择 器 中 单 击 <table> 标 记 ， 或 执行 “修改 ”| “表格 ”| “选择 表格 ” 
命令 ， 选 中 整个 表格 。 选 中 整个 表格 的 效果 如 图 6-5 所 示 。 

(2) 选中 一 行 表格 单元 或 一 列表 格 单元 的 方法 如 下 : 将 光标 放置 在 一 行 表格 单元 的 
左边 界 上 ， 或 将 光标 放置 在 一 列表 格 单元 的 顶端 ， 当 黑色 箭头 出 现时 单 击 鼠 标 ， 或 单 击 一 
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个 表格 单元 , 模 同 或 纵 同 拖 动 腿 标 可 选择 一 行 或 一 列表 格 蛙 元 。 选 中 一 列表 格 早 元 的 情况 
如 图 6-6 所 示 。 


es 


图 6-5 ”选中 整个 表格 图 6-6 ”选中 一 列表 格 单元 


(3) 选中 多 个 连续 表格 单元 的 方法 如 下 : 单 击 一 个 表格 和 蛙 元 ， 然 后 纵 癌 或 模 问 拖 动 
孔 标 到 为 一 个 表格 单元 ， 或 单 击 一 个 表格 单元 ， 然 后 按 住 Shift 键 单 击 态 一 个 表格 单元 ， 
所 有 窍 形 区 域内 的 表格 单元 部 侯 选 择 。 选 中 多 个 连续 表格 单元 的 情况 如 图 6-7 所 示 。 

(4) 选中 多 个 不 连续 表格 单元 的 方法 如 下 : 按 住 Ctrl 键 ， 早 击 多 个 要 选择 的 表格 单 


元 。 选 中 多 个 不 连续 表格 单元 情况 如 网 6-8 所 示 。 


图 6-7 选中 多 个 连续 表格 单元 图 6-8 ”选中 多 个 不 连续 表格 单元 


6. 3.2 表格 、 早 元 格 属性 面板 


1. 表格 的 属性 和 面板 
选中 表格 ,执行 “窗口 ”| “属性 ”命令 出 现 表 格 属性 面板 ， 如 图 6-9 所 示 。 


六 汗 蒋 席 考 9 洒 


| 表格 行 B)5 | 宽 00 | 佛 素 ”| 填充 P) | ”| 对 齐 的 | 居中 对 齐 v| ”类 必 ) | 无 ~ 


| | 烈 ) BB 间距 (8) 边框 8) 1 
电视 吻 国 多 


也 


图 6-9 表格 属性 面板 


表格 属性 和 面板 的 各 选项 功能 如 下 : 

“表格 ”: 用 于 设置 表格 的 名 称 。 

“ 行 ”: 用 于 设置 表格 的 行 数 。 

“ 列 ”: 用 于 设置 表格 的 列 数 。 

“ 宽 ”: 用 于 设置 表格 宽度 。 

“ 填 序 ”: 用 于 设置 表格 内 单元 格 的 内 容 和 边 框 的 间距 。 

“间距 ”: 用 于 设置 表格 内 单元 格 间 的 距离 。 

“对 齐 ”: 用 于 设置 表格 在 文档 中 的 对 齐 方式 ， 在 下 拉 列 表 中 有 4 个 选项 : “ 雹 
对 齐 ”、“ 届 中 对 齐 ”、“ 右 对 齐 ” 和 “默认 ”。 


AAA 


101 


90 JelQeu9 


Faeermnoemwar CESSB 中 文 航 坏 准 实 创 坝 户 

> “类 ”: 用 于 设置 应 用 于 表格 的 CSS 样 并 ， 

> “ “边框”: 用 于 设置 表格 的 边框 厚度 ， 以 像素 为 单位 。 设 置 为 0 时 将 不 显示 边框 。 
如 果 要 在 “边框 ”设置 为 0 时 查看 单元 格 和 表格 边框 ， 请 选择 “查看 ”|“ 可 视 
化 助理 ” |“ 表格 边框 ”。 

> ”号 清除 列 宽 ， 单 击 此 按钮 将 表格 的 列 宽 压 缩 到 最 小 值 ， 但 不 影响 单元 格 内 元 
素 的 显示 。 图 6-10 显示 了 表格 在 清除 列 宽 前 后 的 效果 。 


304 
一 一 J 


90 > 


1 


> 


5 1|2 - 3 
123456789 5 dl123456789| 
了 8 BT F 


B 
图 6-10 清除 列 宽 前 后 


> ”二 清除 行 高 ， 单 击 此 按钮 将 表格 的 行 高 压缩 到 最 小 值 ， 但 不 影响 单元 格 内 元 
系 的 显示 。 

> “” 宫 : 表 宽 单位 转化 为 像素 〈 即 固定 大 小 ) 。 

> 兄 ， 表 宽 单位 转化 为 百分比 ( 即 相对 大 小 ， 

在 Dreamweaver CS6 的 表格 属性 和 面板 不 外 直接 设置 表格 的 背景 图 像 和 背景 闫 色 。 如 琳 
布 户 将 图 像 设置 为 表格 的 背景 ， 或 设置 表格 的 背景 磊 色 ， 需 要 用 表格 属性 的 CSS 设置 面 
板 了 。 有 关 表 格 背 景 图 像 和 背景 闫 色 的 具体 设置 方法 , 将 在 介绍 单元 格 的 属性 时 一 并 介绍 

2， 单 元 格 的 属性 面板 

选中 单元 格 ， 执 行 “ 窗 口 ”| “属性 ”命令 出 现 单元 格 属性 面板 如 图 6-11 所 示 。 


属性 四 
| <》 UL| 格式 双 ) 关 BT 江 搓 和 些 些 标题 吕 Se 
Bss | DD ao 人 oo Be 加 
=F| 单元 格 。 水 平 外 默认 |x| 宽 吕 不 换行 0) 门 ” 背景 疗 色 (6) | -| 
一 器 让 二 下 加 | 默 VW | 高 如 标题 下 ) 口 


图 6-11 单元 格 属性 面板 


单元 格 属 性 面板 分 为 上 下 两 部 分 。 上 部 分 用 于 设置 单元 格 内 文本 等 内 容 的 属性 ， 各 选 
项 功能 不 再 袭 述 (请 见 第 4 章 的 相应 部 分 )。 下 部 分 用 于 设置 单元 格 的 属性 ， 各 选项 功能 
说 明 如 下 : 
> “水 平 ”: 设置 单元 格 内 容 的 水 平 对 齐 。 可 以 将 该 对 齐 设 置 为 “ 左 对 齐 ”、“ 届 
中 对 齐 ”、“ 右 对 齐 ” 或 “默认 ”。 
> “ “垂直 ”: 设置 单元 格 内 容 的 牌 直 对 齐 。 可 以 将 该 对 齐 设 置 为 “顶端 ”“ 中 间 ”、 
“底部 ”、“ 基 线 ” 或 “默认 ”。 
“ 宽 ”: 用 于 设置 单元 格 宽 上 度 〈 以 像 双 为 单位 ) 。 
: 用 于 设置 单元 格 高 度 〈 以 像素 为 单位 ) 。 
“不 换 行 ” ， 防 下 单词 换行 。 选 择 了 此 选项 后 ， 布 局 单元 格 按 需要 加 宽 以 适应 文 
本 ， 而 不 是 在 新 的 一 行 上 继续 该 文本 。 
> “标题 ”: 选中 “标题 ”， 则 单元 格 为 标题 单元 格 。 表 头 单 元 格 内 的 文字 将 以 加 
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粗 黑体 显示 。 

> “背景 颜色 ”: 背景 颜色 ， 用 于 设置 单元 格 的 背景 颜色 。 单 击 颜色 按钮 [J， 并 
在 弹出 的 颜色 选择 器 中 选择 一 种 颜色 , 或 在 旁边 的 文本 框 中 输入 对 应 于 某 种 颜色 
的 代码 。 

> ”| 回 : 合并 单元 格 ， 选 中 多 个 单元 格 时 可 用 。 作 用 是 将 多 个 单元 格 合并 为 一 个 单 
元 格 。 

> ”| 站 拆 分 单元 格 ， 将 单元 格 拆 分 为 多 行 或 多 列 。 

与 文本 的 属性 面板 类 似 , 单元 格 的 属性 面板 也 分 为 HTML 设置 面板 和 CSS 设置 面板 ， 

6-12 所 示 为 CSS 设置 面板 。 


尾 性 

《》HTIL 目标 规则 body x| 字体 (0) | 默认 字体 [v]|BZ 至 笃 沽 于 回 

| 上 css | 编辑 规则 天 小 名 ) 国 | 33333 Es 
国 单元 格 ”水平 思 | 默认 |v| 宽 如 不 换行 0) 口 。 青 县 颜色 (G) [ -| 页 面 属性 
-一口 花生 直人 默认 |x| 高 0 标题 到 ) 口 


图 6-12 单元 格 CSS 格式 设置 面板 


在 这 里 ，Dreamweaver CS6 的 单元 格 属 性 面板 中 已 不 能 直接 设置 单元 格 的 背景 图 像 
了 ， 而 需要 定义 CSS 规则 进行 指定 。 
下 和 面 通过 一 个 人 简单 示例 介绍 在 Dreamweaver CS6 中 通过 新 建 CSS 规则 设置 单元 格 背 
景 图 像 的 一 般 操 作 步 又 。 
01 执行 “插入 ”/“ 表 格 ” 菜 单 命 令 ， 在 弹出 的 “表格 ”对 话 框 中 设置 表格 的 宽度 
为 300 像素 ， 行 数 为 3， 列 数 也 为 3， 边框 粗细 为 1。 
0 全 将 光标 置 于 第 一 行 第 一 列 的 单元 格 中 ， 然 后 单 击 其 属性 面板 左上 角 的 和 经 按 
钮 ， 在 “目标 规则 ”下 拉 列 表 中 选择 “新 CSS 规则” 并 单 击 “编辑 规则 ”按钮 打开 “新 
建 CSS 规则 对 话 框 ”。 
03， 在 “选择 需 类 型 ” 下拉 列表 中 选择 “标签 ”“ 选 择 器 名称” 选择 td,， “规则 定义 ” 
选择 “ 仅 限 该 文档 ” 然后 单 击 “ 确 定 ” 按 钮 打开 对 应 的 规则 定义 对 话 框 。 
04 在 对 话 框 左 侧 的 “分 类 ”列表 中 选择 “背景 ”% 然后 单 击 “ 背 景 图 像 ” 右 侧 的 “ 浏 
览 ” 按 钮 ， 在 弹出 的 资源 对 话 框 中 选择 喜欢 的 背景 图 片 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 
此 时 , 在 文档 窗口 中 可 以 看 到 表格 中 所 有 的 单元 格 都 目 动 应 用 了 选择 的 背景 图 片 。 戏 


果 如 图 6-13 所 示 。 


一 


图 6-13 ”设置 单元 格 背景 图 像 


如 琳 希 望 不 同 的 单元 格 应 用 不 同 的 背景 图 像 ， 则 选中 要 设置 至 景 图 像 的 单元 格 之 后 ， 
在 上 述 步骤 中 的 第 是 0 的 “选择 器 类 型 ”下 拉 列 表 中 选择 “类 ”， 然 后 在 “选择 器 名 称 ” 
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CGGB 守 人 妆 约 各 准 案 人 鹿 末 在 


BE BEE | 
中 键入 名 称 ， 如 .backsgroundl1。 效 果 如 图 6-14 所 示 。 


7 7 
| 
MA EA 


图 6-14 ”设置 单元 格 背景 图 像 


表格 的 背景 图 像 或 背景 颜色 设置 方法 与 此 相同 ， 不 同 的 是 ， 选 择 器 名 称 应 为 table。 
具体 操作 方法 在 此 不 再 袭 述 。 

A 注意 : 

9 使 用 属性 检查 器 更 改 表 格 和 其 元 素 的 属性 时 , 需要 注意 表格 格式 设置 的 优 

先 顺序 。 单 元 格格 式 设置 优先 于 行 格式 设置 ， 行 格式 设置 又 优先 于 表格 格式 设置 。 假 

如 将 单个 单元 格 的 背景 颜色 设置 为 蓝 色 ， 然 后 将 整个 表格 的 背景 颜色 设置 为 黄色 ， 则 

蓝 色 单元 格 不 会 变 为 黄色 ， 因 为 单元 格格 式 设置 优先 于 表格 格式 设置 。 


6.3.3 增加 、 删 除 行 或 列 


在 Dreamweaver CS6 中 增加 、 删 除 行 或 列 也 变 得 非 稼 简单。 下 面 通过 一 个 简单 示例 介 
绍 这 些 操作 的 具体 步骤 。 例 子 中 ， 先 创建 一 张 表 格 然 后 进行 增加 、 删 除 行 或 列 的 操作 。 

01 单 击 “插入 ” 栏 上 的 “常用 ”标签 ， 切 换 到 常用 插入 面板 ， 单 击 插入 表格 图 标 
按钮 号 ， 或 执行 “插入 ” | “表格 ”命令 。 出 现 的 “表格 ”对 话 框 。 

02 在 对 话 框 的 “ 行 数 ” 文 本 框 中 输入 表格 的 行 数 4。 在 “ 列 数 ”文本 框 中 输入 表 
格 列 数 $S， 其 余 选 项 保持 默认 值 。 单 击 “ 确 定 ” 按 钮 插入 表格 。 并 在 表格 中 输入 文本 ， 如 
图 6-15 所 示 。 


So 


fitoito ic 


心 |Co No 1 一 
Fr | 一 | 一 | 一 


图 6-1$ 创建 表格 


03 把 光标 定位 于 第 3 行 的 任 一 单元 格 中 ， 通 过 以 下 方法 乙 一 删除 一 行 : 

> ”执行 “修改 ”| “表格 ”| “删除 行 ”命令 ， 删 除 表 格 第 3 行 。 

> ” 夸 击 此 单元 格 ， 在 弹出 的 上 下 文 菜 单 中 执行 “表格 ”| “删除 行 ”命令 ， 删 除 

表格 第 3 行 。 

也 可 以 将 光标 放置 在 第 3 行 表格 单元 的 左边 界 上 ， 当 黑色 箭头 出 现时 单 击 鼠标 ， 选 中 
表格 第 3 行 ， 然 后 按 Delete 键 删除 行 。 

删除 第 3 行 后 的 效果 ， 如 图 6-16 所 未。 

045 把 光标 定位 于 第 2 列 的 任 一 单元 格 中 ， 通 过 以 下 方法 之 一 删除 一 列 : 

> ”执行 “修改 ”| “表格 ”| “删除 列 ” 命 令 ， 删 除 表 格 第 2 列 。 
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> ” 石 击 此 单元 格 ， 在 弹出 的 上 下 文 菜 单 中 执行 “表格 ”| “删除 列 ” 命 令 ， 删 除 
表格 第 2 列 。 
将 光标 放置 在 第 2 列表 格 单元 的 上 边界 上 ， 当 黑色 箭头 出 现时 单 击 鼠标 ， 选 中 表格 第 
2 列 ， 然 后 按 Delete 键 删 除 行 。 
删除 第 2 列 后 的 效果 ， 如 图 6-17 所 示 。 
05 用 上 一 步 同样 的 方法 删除 3 和 4 列 。 这 时 效果 如 图 6-18 所 示 。 


1.1 hh.2 ll.3 ll.4 .5 1.1 1.4 .5 rm EE 
2.1 [2.2 [2,3 |2.4 |2.5 2,1 bb 2,4 |2.5 7 1 0 5 
B.1 |4.2 |4.3 |4.4 |4.5 4.1 4 4.4 [4.5 I4.1 "而 : 
v 一 人 一 人 es 
图 6-16 ”删除 第 3 行 图 6-17 删除 第 2 列 图 6-18 删除 第 3、4 列 


065 将 光标 定位 于 数字 为 2.5 的 单元 格 ， 通 过 以 下 方法 之 一 增加 一 行 : 

> ”执行 “修改 ”| “表格 ”| “插入 行 ”命令 ， 插 入 一 行 。 

> ”执行 “插入 ”| “表格 对 象 ”| “在 上 面 插入 行 ”命令 ， 插 入 一 行 。 

右 击 此 单元 格 ， 在 弹出 的 上 下 文 末 单 执行 “表格 ”| “插入 行 ”命令 ， 插 入 一 行 。 

插入 空 行 后 的 效果 ， 如 图 6-19 所 示 。 

079 将 光标 定位 于 数字 为 1.5 的 单元 格 ， 通 过 以 下 方法 之 一 增加 一 列 : 

> ”执行 “修改 ”| “表格 ”| “插入 列 ” 命 令 ， 插 入 一 空 列 。 

> ”执行 “插入 ”| “表格 对 象 ”| “在 左边 插入 列 ” 命 令 ， 插 入 一 空 列 。 

> ， 碳 击 此 单元 格 ， 在 弹出 的 上 下 文 菜 单 中 执行 “表格 ”| “插入 列 ” 人 命令， 插入 一 
人 

插入 空 列 后 的 最 终 效 果 ， 如 图 6-20 所 未。 


IL.1 1.5 二 LB 
有 于 2.5 cl 2.5 
4.1 4.5 4.1 4.5 
图 6-19 ”插入 罕 白 行 图 6-20 ”实例 制作 结 来 


6.3.4 拆 分 、 合 并 单元 格 
在 Dreamweaver CS6 中 拆 分 、 合 并 单元 格 也 非常 徐 单 。 下 面 通过 一 个 稍 单 示例 来 介绍 
这 些 操作 的 具体 步骤 。 例 子 中 先 创建 一 张 表 格 ， 如 图 6-21 所 示 ， 然 后 进行 拆 分 、 合 并 单 
元 格 操作 ， 了 最 终 实现 网 6-22 的 效 末 。 
01 在 文档 中 插入 图 6-22 所 示 的 表格 。 
02 选中 数字 分 别 为 1.1 和 1.2 的 单元 格 。 
03 通过 以 下 方法 之 一 合并 这 两 个 单元 格 : 
单 击 属 性 面板 中 的 “合并 单元 格 ” 按 钮 国 ， 合 并 单元 格 。 
执行 “修改 ”| “表格 ”| “合并 单元 格 ” 命 令 ， 合 并 单元 格 。 
鼠标 右 击 选中 的 单元 格 ， 在 弹出 的 上 下 文 荣 单 中 执行 “表格 ” | “合并 单元 格 ” 
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训 汇 莹 颈 如 9 洒 


HBETRYEST (CAMB 字 站 以 保 六 实 例 用 这 
命令 ， 合 并 单元 格 。 

这 时 原来 的 两 个 单元 格 束 合并 为 一 个 ， 如 图 6-23 所 示 。 

04 同样 办 法 合并 数字 为 2.2 和 3.2 的 单元 格 ， 操 作 的 结果 如 图 6-24 所 示 。 


1 


而 
人 2,. 3 
人 这 3. 2 : 改 : 


图 6-21 插入 表格 图 6-22 ”操作 结 图 6-23 合并 单元 格 (1) 


03 自 光标 定位 于 数字 为 1.3 的 单元 格 ， 通 过 以 下 方法 打开 “ 拆 分 单元 格 ” 对 话 框 。 
> ， 单 击 属性 面板 中 的 “ 拆 分 单元 格 ”按钮 起 。 
> ”执行 “修改 ”| “表格 ”| “ 拆 分 单元 格 ” 命 令 。 
> ”鼠标 右 击 选中 的 单元 格 ， 在 弹出 的 上 下 文 某 单 中 执行 “表格 ”| “ 拆 分 单元 格 ” 
Ns 
06 昌 在 对 话 框 中 选择 “把 单元 格 拆 分 为 行 ” 在 “ 行 数 ” 文 本 框 中 输入 2。 单 击 “ 确 
定 ” 完 成 单元 格 拆 分 ， 结 末 如 图 6-25 所 示 。 


1 3 
三 和 本 ll ] 
肚 2.3 1 2.3 
3.1 .23.2 9. 3 : 责 | p.23.2 3 ] 
图 6-24 合并 单元 格 (2) 图 6-25 ” 拆 分 单元 格 1.3 


6. 3.5 在 表格 中 添加 内 容 


在 文档 中 插入 表格 后 ， 可 以 在 表格 中 输入 各 种 数据 了 。 要 想 将 请 如 图 人像、Flash 动画 
或 其 他 巡 体 的 数据 插入 到 表格 单元 格 中 ， 先 蛙 击 单元 格 ,将 光标 帮 管 在 需要 插入 数据 的 单 
元 格 中 ， 从 “插入 ”来 单 或 “搬入 ”和 面板 中 选择 选项 即 可 。 要 插入 文本 ， 先 将 其 复制 到 可 
贴 板 并 精 贴 在 单元 格 内 ， 或 者 直接 在 单元 格 内 输入 数据 。 控 Tab 键 可 以 在 竺 元 格 间 移动 。 

各 要 使 表格 中 的 数据 对 草 , 应 尽量 使 用 单元 格 属性 面板 下 部 分 中 的 “水 平和 “ 垂 了 ” 
域 来 对 草 单元 格 中 的 数据 ， 要 避免 使 用 在 属性 面板 中 上 部 分 的 对 齐 属 性 。 

下 和 面 以 制作 图 6-26 为 例 ， 介 绍 在 表格 中 添加 内 容 。 
日 其 


2012-07-02 


图 6-26 ”实例 效果 


01 有 单 击 “插入 ”面板 中 的 “表格 ”按钮 国 ， 插 入 一 张 2 行 2 列 的 表格 。 
02 光标 定位 在 表格 第 一 行 第 一 列 单元 格 ， 输 入 文字 “图 像 ” 用 同样 的 方法 在 第 二 
行 输入 “日 期 ” 


90 J810ByD 
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0 名 把 光标 定位 在 第 二 行 第 一 列 单元 格 ， 单 击 插入 图 像 按钮 至 ， 在 弹出 的 对 话 框 中 
选择 图 像 。 

0 全 把 光标 定位 在 第 二 行 第 二 列 单 元 格 内 ， 单 击 插入 时 间 按 钮 名， 在 弹出 的 对 话 杠 
中 选择 时 间 格 式 。 

93 单 击 “ 确 定 ” 控 钮 完成 本 例 制 作 。 


6. 3.6 复制 及 粘贴 单元 格 


在 Dreamweaver CS6 中 ， 可 以 非常 灵活 地 复制 及 精 贴 日 元 格 。 可 以 一 次 只 复制 、 精 贴 
一 个 单元 格 ， 也 可 以 一 次 复制 、 粘 贴 一 行 、 一 列 旋 人 至 多 行 多 列 单元 格 。 但 不 能 复制 不 成 方 
形 的 区 域 。 复 制 及 粘贴 单元 格 的 步骤 如 下 : 

(1) 选择 表格 中 的 一 个 或 多 个 单元 格 。 所 选 的 单元 格 必 须 是 连续 的 ， 并 且 形 状 必 须 
为 定形 。 
(2) 鼠标 右 击 选 中 的 单元 格 ， 在 弹出 的 上 下 文 染 单 中 执行 “复制 ”命令 
(3) 选择 要 粘贴 单元 格 的 位 置 。 
> ” 奋 要 用 在 斑 贴 板 的 单元 格 蔡 换 现 有 的 单元 格 , 请 选择 一 组 与 一 贴 板 上 的 单元 格 具 
有 相同 布局 的 现 有 单元 格 。 例 如 ， 如 果 复 制 或 注 切 了 一 块 3x2 的 单元 格 ， 则 可 以 
选择 男 一 块 3x2 的 单元 格 通 过 精 贴 进行 蕉 换 。 
> “大 要 在 特定 单元 格 所 在 行 粘贴 一 整 行 单 元 格 ， 请 单 击 该 单元 格 。 
> “大 要 在 特定 单元 格 左 侧 粘 贴 一 整 列 单元 格 ， 请 单 击 该 单元 格 。 
各 要 用 粘贴 的 单元 格 创 建 一 个 新 表格 ， 请 将 插入 点 放置 在 表格 之 外 。 
把 光标 定位 于 目标 表格 中 ， 羽 标 右 击 目 标 单 元 格 ， 在 弹出 的 上 下 文采 单 中 执行 
“粘贴 ”命令 ， 完 成 粘贴 。 

例如 ， 要 把 图 6-27 选中 的 内 容 粘 贴 到 图 6-28 表格 的 相同 位 置 ， 可 以 把 选中 内 容 复制 

到 甬 贴 板 ， 然 后 把 区 标定 位 到 目标 到 的 第 一 行 第 一 列 单元 格 内 ， 执 行 粘贴 命令 。 


| | 

2 1 2»2 7 | ] 

“村 3.2 3. 3 | 

ee \ | 
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图 6-27 源 表格 图 6-28 目标 表格 


粘贴 完 后 目标 表格 如 图 6-29 所 示 。 如 来 把 源 单 元 格 的 内 容 复 制 到 目标 表格 时 ， 目 标 
表格 没有 足够 的 列 数 来 容纳 源 单 元 格 ， 将 弹出 出 钳 信 息 ， 如 网 6-30 所 示 。 管 告 目标 表格 
没有 是 够 的 单元 格 ， 无 法 完成 粘贴 动作 。 


Ry 注意 : 


2 如 果 剪 贴 板 中 的 单元 格 不 到 一 整 行 或 一 整 列 , 并 且 单 击 某 个 单元 格 然后 粘 
贴 剪 贴 板 中 的 单元 格 , 则 所 单 击 的 单元 格 和 与 Se WR ee ey 
换 (根据 它们 在 表格 中 的 位 置 )。 如 果 选 择 了 整 行 或 整 列 , 然后 选择 “编辑 ”|“ 

则 将 从 表格 中 删除 整个 行 或 列 ， 而 不 仅仅 是 单元 格 的 内 容 。 
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图 6-29 粘贴 结 末 图 6-30 ”出 钳 信 和 县 


6. 3.7 导入 表格 数据 


在 Dreamweaver CS6 中 建 并 的 表格 ,可 以 保存 到 一 个 文本 文件 中 , 需要 时 再 从 文件 中 
引入 该 表格 数据 。 下 和 面 对 表格 的 输出 和 引入 分 别 进行 说 明 。 
1. 输出 表格 数据 
将 表格 数据 导出 为 文本 文件 的 基体 操作 步骤 如 下 : 
01 在 文档 窗口 中 创建 一 个 表格 ， 在 表格 中 输入 数据 ， 如 图 6-31 所 示 。 
02 将 光标 放置 在 该 表格 中 或 选中 该 表格 。 执 行 “ 文 件 ”| “导出 ”| “表格 ” 命 
令 。 弹 出 “导出 表格 ”对 话 框 ， 如 图 6-32 所 示 。 


名 称 定价 | 数量 


信息 系统 设计 与 开发 35 48 


软件 测试 技术 21 | 35 
系统 设计 师 教 各 52 | 49 
图 6-31 表格 图 6-32 “导出 表格 ”对 话 框 


03 在 “ 定 界 符 ” 下 拉 列 表 框 中 选择 一 种 表格 数据 输出 到 文本 文件 后 的 分 隔 符 。 其 
中 “Tab” 表 示 使 用 制 表 和 从 作为 数据 的 分 隅 符 ， 该 项 是 默认 设置 “空白 键 ” 表 示 使 用 空格 
作为 数据 的 分 卫生 ;“ 人 逗 点 ”表示 使 用 逗号 作为 数据 的 分 阳 符 ;“ 分 写 ” 表 示 使 用 分 写作 为 
数据 的 分 隔 符 ;“ 骨 号 ”表示 使 用 骨 号 作为 数据 的 分 隔 符 。 
04 在 “换行 符 ” 下 拉 列 表 框 中 选择 一 种 表格 数据 输出 到 文本 文件 后 的 换行 方式 。 
其 中 Windows 表示 按 Windows 系统 格式 换行 ; Mac 表示 按 平 果 公 司 的 系统 格式 换行 ; 
UNIX 表示 按 UNIX 的 系统 格式 换行 。 
03， 设置 完成 之 后 ， 单 击 “ 导 出 ”按钮 ， 弹 出 “表格 导出 为 ”对 话 框 。 
06 在 保存 文件 窗口 中 输入 一 个 文件 名 ， 可 以 不 使 用 扩展 名 ， 也 可 以 使 用 一 个 文本 
类型 的 扩展 名 ， 然 后 单 击 “ 保 存 ” 按 钮 完成 表格 数据 导出 。 
使 用 “记事 本 ”应 用 程序 打开 该 文件 ， 内 容 如 图 6-33 所 示 。 


加 tablel.txt 一 记事 本 辐 回 固 


文件 他 ) 编辑 人 下】 格式 血 ) 查看 WW) 大助 0 


和 入 半价 当量 
信息 系统 设计 与 开发 ， 35， a 
内 


划 基 生计 让 全程, sz 区 


图 6-33 ”表格 数据 文件 
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2. 导入 文本 数据 

以 前 保存 的 表格 数据 或 其 他 文本 数据 都 可 以 重新 以 表格 的 形式 引入 到 文档 中 。 将 文本 
文件 数据 导入 为 表格 数据 的 有 具体 操作 步骤 如 下 : 

01 在 记事 本 中 创建 一 组 带 分 隔 符 格式 的 数据 ， 如 网 6-34 所 示 。 

02 在 Dreamweaver 文档 窗口 中 执行 “文件 ”| “导入 ”| “表格 式 数 据 ” 命 令 。 
弹出 “导入 表格 式 数 据 ” 对 话 框 ， 如 图 6-35 所 示 。 


a aa.txt 一 记事 本 
文件 严 ) 编辑 儒 】 格式 血 ) 查看 和 帮助 0) 


姓 它 。 数据 文件 : L - 
小 王 ， 定 界 符 : |Tsb 
人 


图 


表格 宽度 : 名 匹配 内 容 

〇 设置 为 : 三] 
单元 格 边 距 : | ” ”| ”格式 化 首 行 : | [无 格式 ] 
单元 格 间 距 : 过 框 :11 


图 6-34 ”数据 文件 图 6-35 “ 叶 入 表格 式 数据 ”对 话 框 


对 话 框 中 各 选项 的 功能 介绍 如 下 : 
> “数据 文件 ”: 在 数据 文件 文本 框 输入 要 导入 到 表格 的 源 数据 文件 地 址 和 文件 名 ， 
或 单 击 后 面 的 浏览 按钮 ， 选 择 数据 源 文件 。 
> ““ 定 界 符 ”: 在 右边 的 下 拉 列 表 框 中 选择 数据 源 文件 数据 的 分 隔 方式 。 
> “ “匹配 内 容 ”: 选中 此 项 ， 将 根据 数据 长 度 自 动 决 定 表格 宽度 。 
> “设置 为 ”: 选中 此 项 可 设置 表格 宽度 ， 在 后 面 文本 框 中 输入 表格 宽度 数值 ， 并 
可 在 下 拉 列 表 中 选择 “百分比 ”或 “像素 ”。 
> “ “单元 格 边 距 ”: 用 于 设置 表格 内 单元 格 的 内 容 和 边框 的 间距 。 
> “单元 格 间距 ”用 于 设置 表格 内 单元 格 间 的 距离 。 
“格式 化 首 行 ”: 在 下 拉 列 表 中 有 “无 格式 ”、“ 粗 姓名 滞 深 | 咬 理 
体 ”、“ 冬 体 ” 和 “ 粗 和 斜体 ”4 个 选项 。 小 王 |[a3 98 
03 在 该 对 话 框 中 设置 需要 引入 数据 的 位 置 和 输入 数 小 刘 |78 “90 
据 时 所 用 的 分 隅 符 类 型 逗号 “,”。 
04 单 击 “确定 ”按钮 。 此 时 在 Dreamweaver 文档 图 6-36 ”导入 数据 后 的 效果 
口中 出 现 数据 表格 ， 如 图 6-36 上 所 示 。 


6. 3.8 表格 排序 


在 表格 中 输入 内 容 时 ， 第 第 需要 对 这 些 内 容 进 行 排 序 。Dreamweaver CS6 提供 了 表格 
排序 的 功能 。 下 面 以 一 个 示例 介绍 表格 排序 的 具体 的 步骤 。 
019 新 建 一 个 表格 ， 效 果 如 网 6-37 所 示 。 
02 将 光标 定位 在 表格 内 ， 然 后 执行 “命令 ”| “排序 表格 ”命令 ， 弹 出 “排序 表 
格 ” 对 话 杠 ， 如 图 6-38 所 示 。 
对 话 框 中 各 选项 功能 说 明 如 下 : 
> “ “排序 按 ”: 在 “排序 按 ” 下 拉 列 表 中 列 出 所 有 列 号 ， 用 于 确定 哪个 列 的 值 将 用 
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Vv 


六 尘 区 席 攻 9 填 


EniooGmar (CYXB 守 交纳 但 准 实 创 玉 在 


于 对 表格 的 行进 行 排序 。 


排序 按 : 列 1 加 
顺序 : | 按 字母 顺序 v | | 升序 同 
姓名 数学 物理 再 近 | 一 和 


El 顺序 : | 按 字母 顺序 避 | | 升序 Y| 
Ful er peen 


LL 排序 脚注 行 
| 1 宗 成 排序 后 所 有 行 上 凑 色 .但 持 不 变 


图 6-37 排序 前 的 表格 图 6-38 “排序 表格 ”对 话 框 


> “顺序 ”确定 是 “ 按 字 母 顺序 ”还 是 “ 按 数字 顺序 ”， 是 以 “升序 ”(A 到 Z， 
小 数字 到 大 数字 ) 还 是 “降序 ”对 列 进行 排序 。 

> “再 按 ”/“ 顺 序 ” 确定 在 不 同 列 上 第 二 种 排序 方法 的 排序 顺序 。 在 “再 按 ” 弹 
出 式 菜单 中 指定 应 用 第 二 种 排序 方法 的 列 ， 并 在 “顺序 ”弹出 式 菜单 中 指定 第 二 
种 排序 方法 的 排序 顺序 。 

> “排序 包含 第 一 行 ” 指定 表格 的 第 一 行 应 该 包括 在 排序 中 。 如 果 第 一 行 是 标题 ， 
不 应 移动 ， 则 不 选择 此 选项 。 

> “ “排序 标题 行 ” 指定 使 用 与 body 行 相同 的 条 件 对 表格 thead 部 分 (如 果 存 在 ) 
中 的 所 有 行进 行 排序 。 请 注意 ， 即 使 在 排序 后 thead 行 仍 将 保留 在 thead 部 分 
中 并 仍 显 示 在 表格 的 项 部)。 

> “排序 脚注 行 ? 指定 使 用 与 body 行 相同 的 条 件 对 表格 tfoot 部 分 (如 果 存 在 ) 
中 的 所 有 行进 行 排序 。 请 注意 ， 即 使 在 排序 后 tfoot 行 仍 将 保留 在 tfoot 部 分 
中 并 仍 显 示 在 表格 的 底部 。) 

> “完成 排序 后 所 有 行 闫 色 保 持 不 变 ”; 指定 排序 后 表格 行 的 颜色 保持 与 排序 前 表 
格 行 的 颜色 一 致 。 如 果 表 格 行使 用 两 种 交替 的 颜色 ， 则 取消 选择 此 选项 以 确保 排 
序 后 的 表格 仍 具有 颜色 交替 的 行 。 

03 在 “排序 按 ” 下 拉 列 表 框 选择 需要 进行 排序 的 列 。 本 例 按 数学 成 绩 排 序 ， 各 项 

具体 设置 如 图 6-39 所 示 。 
44 单 击 “ 确 定 ” 按 钮 ， 完 成 操作 。 排 序 结果 如 图 6-40 所 示 。 


90 JelQaeu9 


排序 按 : | 列 2 ~ 
顺序 : | 按 数 字 顺 序 >| | 升序 司 
再 按 : | 列 3 攻 \ 
顺序 : | 按 数字 顺序 。 。”| | 升序 _ 同 姓名 数学 物理 
口 排序 标题 行 剂 78 90 
口 排序 脚注 行 a 
口 完成 排序 后 所 有 行 颜色 保持 不 变 王 _||93 医 
图 6-39 “排序 表格 ”对 话 框 图 6-40 “排序 后 的 表格 
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加 避 示 :jy 凡 窑 是 于 计时 ， 选 丘 “ 接 数字 斋 席 。 如果 对 组 由 一 9 
成 的 数字 按 字 和 母 顺序 进行 排序 ， 则 会 将 这 些 数字 作为 单词 进行 排序 ( 排序 结果 是 1、 
2、20、3、30 )， 而 不 是 将 它们 作为 数字 进行 排序 ( 排序 结果 是 1、2、3、10、20、 0 


6.4 扩展 表格 模式 


通常 表格 是 在 “标准 ”模式 下 直接 插入 的 ， 其 最 初 的 用 途 是 显示 表格 式 数据 。 虽 然 它 
也 能 任意 改变 大 小 和 行列 ， 但 在 页 面 中 编辑 表格 和 表格 中 的 数据 并 不 方便 。 

在 本 节 中 ， 我 们 将 介绍 Dreamweaver CS6 中 的 扩展 表格 模式 。“ 扩 展 表格 ”模式 临时 
器 文档 中 的 所 有 表格 添加 单元 格 边 距 和 间距 ， 并 且 增 加 表格 的 边框 以 使 编辑 操作 更 加 容 
易 。 

下 面 通 过 一 个 简单 示例 介绍 切换 到 表格 “扩展 ”模式 下 的 具体 操作 步骤 。 

01 由 于 在 “代码 ”视图 下 无 法 切换 到 表格 的 “扩展 ”模式 ， 所 以 应 先 将 当前 文档 
窗口 的 视图 切换 到 “设计 ”视图 或 “ 拆 分 ”视图 。 

02 在 文档 窗口 插入 一 个 表格 ， 如 图 6-41 所 示 。 

03 执行 以 下 操作 之 一 : 

@ 执行 “查看 ”/“ 表 格 模式 ”/“ 扩 展 表格 模式 ” 采 单 命令 。 

@ 按 下 Alt+F6 快捷 组 合 键 。 

@ 在 “插入 ”面板 的 “布局 ”类 别 中 ， 单 击 “ 扩 展 ?” 0 如 图 6-42 所 示 。 


插入 流体 网 格 布局 Diw 标签 
给 制 AP Div 

忆 spry 荣 单 栏 

匡 1 spry 选项 卡 式 面板 

Spry 折 查 式 


TD 


图 6-41 标准 模式 下 的 表格 图 6-42 ”切换 到 扩展 模式 


此 时 ， 文 档 窗 口 的 项 部 会 出 现 标 有 “扩展 表格 模式 ”的 条 。 且 文档 窗口 工作 区 中 的 所 
人 忆 框 ， 如 图 6-43 所 示 。 
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图 6-43 表格 的 扩展 模式 


利用 扩展 模式 ， 用 尸 可 以 选择 表格 中 的 项 目 或 者 精确 地 放置 插入 点 。 例 如 ， 用 户 可 以 
111 


六 尘 区 席 灵 9 进 
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文 投 款 丽 突 创 私 记 


将 插入 局 放置 在 国人 的 太志 或 省 边 从 而 避免 无 意 中 选中 该 图 像 或 表格 单元 格 。 


”注意 : 
a 一 旦 做 出 选择 或 放置 插入 点 ， 就 应 该 回 到 “设计 ”视图 的 “标准 ”模式 下 
进行 编辑 。 诸 如 调整 大 小 之 类 的 一 些 可 视 操作 在 “扩展 表格 ”模式 中 不 会 产生 预期 结 
采 。 
如 果 要 退出 扩展 表格 模式 ， 可 以 执行 以 下 操作 之 一 : 
@ 单 击 文档 窗口 项 部 “扩展 表格 模式 ” 右 侧 的 “退出 ”。 
执行 “得 看 ”/“ 表 格 模式 ”/“ 标 准 模 式 ” 沈 单 命 令 。 
在 “插入 ”面板 的 “布局 ”类 别 中 ， 单 击 “ 标 准 ” 按 钮 。 
按 下 Alt + F6 快捷 组 合 键 。 


6.5 ”利用 表格 布局 页 面 


Dreamweaver CS6 提供 了 多 种 对 Web 页 面 进行 布局 的 方法 , 利用 表格 设计 网 页 布局 是 
其 中 第 用 的 一 种 。 
本 节 将 通过 一 个 简单 的 例子 介绍 使 用 表格 进行 页 面 布局 的 方法 。 
01 ,新建 一 个 HTML 页 面 。 
02 打开 “插入 ”浮动 面板 中 的 “第 用 ”面板 ， 单 击 表格 几 标 ， 在 弹出 的 对 话 框 中 
设置 表格 的 行为 1， 列 为 2， 宽 为 850 像素 ， 然 后 单 击 “ 确 定 ” 插 入 表格 。 
039 先 中 表格 ， 在 属性 面板 上 的 “对 齐 ” 下 拉 列 表 中 选择 “居中 对 齐 ”， 使 表格 在 
页 面 中 居中 。 
04 选中 第 一 行 第 二 列 的 单元 格 ， 在 属性 面板 上 设置 其 宽度 为 300 像素 ， 然 后 执行 
“插入 ”/“ 图 像 ” 命 令 ， 在 此 插入 一 张 图 片 。 效 果 如 图 6-44 所 示 。 


二 wntitiea-! Gm)* = EX 


I E> 
Shodv> Ctable> <tr> [Kth [Rio0% v| 加 加 [| 503 x 387v 47 KY/ :| 


图 6-44 ”在 单元 格 中 插入 图 片 


93 将 光标 定位 在 第 一 行 第 一 列 的 单元 格 中 ， 单 击 属性 面板 上 的 拆 分 单元 格 按钮 
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下， 在 弹出 的 对 话 框 中 将 单元 格 拆 分 为 五 行 一 列 。 

06 具 将 光标 定位 在 拆 分 后 的 第 一 行 单元 格 中 , 输入 文本 “welcome”。 切换 到 | 节 cas. 
属性 面板 ， 新 建 一 个 CSS 规则 ， 选 择 器 类 型 为 “标签 ”， 选 择 器 名 称 为 hl， 在 弹出 的 规 
则 定义 对 话 框 中 设置 大 小 为 24、 加 粗 。 然 后 在 属性 面板 上 设置 其 格式 为 “标题 1”， 单 元 
格 水 平 对 齐 方式 为 “居中 对 齐 ”。 

0 人 将 光标 定位 在 拆 分 后 的 第 二 行 单元 格 中 ， 输 入 文本 “财经 ”。 然 后 在 属性 面板 
上 设置 其 单元 格 水 平 对 齐 方式 为 “ 左 对 齐 ”。 

0 名 将 光标 定位 在 拆 分 后 的 第 三 行 单元 格 中 ， 单 击 属性 面板 上 的 拆 分 单元 格 按钮 
下 ,在 弹出 的 对 话 框 中 将 单元 格 拆 分 为 两 列 。 在 拆 分 后 的 第 一 列 的 单元 格 中 插入 一 幅 图 片 。 
此 时 的 效果 如 图 6-45 所 示 。 


_ 
央 titled-z (xma)y 


Welcome 


财经 


p” 已 本 
2299sho00001 上 证 指数 87-23 13:22 


2184 
2163 


2153 


2137 sina.com 
B39: 38 11:38/13:88 15: 68 


| TT | > 
Chodv> <table> <tr > [Ktd [RD A 100% ~v 回国 [| 671 x 331v 49 K / 2 秒 Unicode (VTF-8) 


图 6-45 ”在 单元 格 中 插入 图 片 


0936 将 光标 定位 在 拆 分 后 的 第 三 行 第 二 列 的 单元 格 中 ,执行 “插入 ”/“ 表 格 ” 命 令 ， 
插入 一 个 七 行 四 列 的 表格 ， 并 在 属性 面板 上 设置 其 党 度 为 100%， 边 框 粗细 为 0。 

109 将 柑 套 表格 的 第 三 行 单元 格 合并 为 一 行 ， 然 后 在 其 中 输入 文本 ， 并 添加 链接 ， 
此 时 的 效果 如 图 6-46 所 示 。 


需 c:\inetpub\wwroot\test\choene. 5 利用 表 恪 布局 现 而 . html (XHTHL)* - 口 藉 


Welcome | 由- 
财经 | 


各 bo 闭 
22003h000001 上 证 指数 6867-23 13:22 
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< 山 | 
bodv> <table> <tr>[<td [RJ 池 Qo0% v| 国 加 [| 671 x 331 |51 kK/2 秒 | Unicode (UTF-8) 


v 


图 6-46 页面 效果 
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六 尘 区 席 灵 9 进 


Welcome 


财经 
-ppsh000001 。 上 证 指数 87-23 13:22 上 证 指数 2.018.46 +2.77 (0.14%) 
| | ” 深 证 指数 ” 7.438.83 +26.36 (0.36%) 

2184 


欧元 - 八 民 册 9.5015 -0.2808 (-2.87%) 
日 元 -人 民 和 市 ”0.0765 +0.0001 (0.09%) 


| 
| 美元 .人民币 “6.8440 +0.0099 (0.1490) 
| 
个 人 一 sina.com 
89:36 11: 30/13: 60 15:69 港币 -人 民 出 ”0.8831 +0.0013 (0.14%0) 


中 国 钢琴 家 朗朗 参加 伦敦 奥运 火炬 传递 


| 刁 伦敦 奥运 会 火 烛 在 伦敦 传递 ， 中 国 钢 
琴 家 即 朗 参加 奥运 火炬 传递 宪 动 。 


图 6-47 ”页 面 效果 
12 保存 页 面 。 按 F12 键 即 可 在 浏览 器 中 预览 页 面 效果 。 


6.6 动手 练 一 练 


制作 一 个 如 图 6-48 所 示 的 表格 。 

制作 一 个 如 图 6-49 所 示 的 表格 。 

在 Dreamweaver CS6 中 对 图 6-49 所 示 表 格 进行 排序 。 

把 图 6-49 所 示 表 格 数 据 导 出 到 文本 文件 中 ， 数 据 以 逗号 分 隔 。 


上 UD 已 王 


眶 三 938056 |26 35600 
李 四 98231 |23 |2900 
于 二 97864 34 3300 


J 1800 
图 6-48 练习 1 图 6-49 练习 2 


6.7 ”思考 题 


1. 粘贴 单元 格 时 有 什么 注意 事项 ? 
2. “标准 ”模式 下 的 单元 格 和 “扩展 ”模式 下 的 表格 有 何 异同 ? 
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第 7 新 行为 


| 


本 章 将 介绍 行为 的 基本 知识 及 使 用 方法 。 内 容 包括 : 行为 、 事 件 的 基本 : 
知识 ; 行为 的 绑 定 ; 行为 属性 的 设置 和 修改 ; 第 三 方 行为 的 安装 ; 详细 介绍 
: Dreamweaver CS6 各 个 内 置 行为 的 使 用 方法 ， 包 括 调 用 JavaScript 代码 、 
跳 转 菜单 、 打 开 浏 览 器 窗口 、 设 置 状态 条 文本 、 显 示 - 隐 藏 AP 元 素 等 行为 。 
; 使 用 行为 制作 网 页 特效 ， 将 使 网 页 动 起 来 ， 令 页 面 更 加 丰富 多 彩 。 
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国 行为 和 事件 的 概念 与 关系 
鲜 ” 应 用 行为 创建 交互 
多 ”Dreamweaver CS6 的 内 置 行为 


ed ee Tr 
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CSGG 中 六 月 标准 实 创 奴 针 


行为 (Behaviors) 是 Dreamweaver CS6 提供 的 一 种 实现 页 面 交 互 控 制 的 机 制 。 要 使 网 
页 更 丰 军 多 彩 的 话 , 束 要 使 用 行为 来 感知 外 界 的 信息 并 作出 相应 的 啊 应 。 Dreamweaver CS6 
提供 了 丰富 的 内 置 行为 ,这 些 行为 的 设置 是 利用 简单 直观 的 语句 设置 手段 , 不 需要 编写 任 
何 代 人 码 ， 束 可 以 实现 一 些 强 大 的 交互 性 与 控制 功能 。 它 还 可 以 从 互联 网 上 下 载 一 些 第 三 方 
提供 的 动作 来 使 用 。 

7.1.1 认识 行为 

利用 行为 可 以 实现 用 户 和 网 页 之 间 的 交互 , 通过 用 户 在 网 页 中 触发 一 定 的 事件 来 引发 
一 些 相 应 的 动作 。 

一 般 来 说 ， 行 为 由 一 个 事件 (Event〉 和 一 个 动作 (action〉 组 成 。 事 件 通 党 由 浏览 右 
确定 ， 比 如 单 击 鼠标 左 键 事 件 、 鼠 标 经 过 事件 和 文件 下 载 事 件 等 。 动 作 通 第 由 一 段 
JavaScript 代码 组 成 ， 通 过 在 网 页 中 执行 这 段 代码 残 可 以 完成 相应 的 任务 ， 比 如 打开 新 的 
浏览 窗口 、 播 放声 音 或 弹出 信息 等 。 行 为 代码 是 客户 闪 JavaScript 代码 ， 即 它 运 行 于 浏览 
句 中 ， 而 不 是 服务 右上 。Dreamweaver 本 刁 提 供 了 很 多 第 用 内 置 行 为 ,而 且 会 把 JavaScript 
代码 添加 在 页 面 中 ， 而 不 需要 目 己 写 。 当 然 ， 也 可 以 对 有 的 代码 进行 手工 修改 ， 使 之 更 符 
合 目 己 的 需要 。 

单个 事件 可 以 触发 多 个 不 同 的 动作 , 这 些 动 作 发 生 的 顺序 可 以 在 Dreamweaver 中 被 指 
定 ， 从 而 达到 需要 的 效果 。 


7.1.2 行为 面板 


在 Dreamweaver 中 ， 主 要 是 在 行为 面板 上 实现 对 行为 的 添加 和 控制 。 如 采 有 必要 ， 还 
可 以 直接 打开 HIML， 在 其 中 进行 必要 的 修改 。 

右 要 打开 “行为 ”面板 ， 执 行 “ 窗 口 ”| “行为 ”命令 。 打 开 的 “行为 ”面板 如 图 
7-1 所 示 。 


标签 检查 器 
属性 [行为 | 标签 <body> 


图 7-1 “行为 ”面板 
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该 面板 中 各 个 部 分 功能 如 下 : 

> ““; 仪 显示 附加 到 当前 文档 的 那些 事件 。 事件 被 分 列 划 归 到 客户 问 或 服务 占 闹 

天 列 中 。 每 个 类 别 的 事件 部 包含 在 一 个 可 折 千 的 列表 中 ， 可 以 单 击 类 别名 称 劳 边 

I 加 号 / 减 写 按钮 展开 或 折 营 该 列表 。 

”: 在 行为 列表 中 按 字母 降序 列 出 可 应 用 于 当前 元 素 的 所 有 事件 。 

> (4: 单 击 该 按钮 ， 弹 出 行为 列表 ， 列表 中 包含 可 以 附加 a 到 当前 所 选 元 素 的 动作 。 
对 当前 不 能 使 用 的 行为 ， 以 灰色 显示 ， 没 有 变 灰 的 其 他 行为 表示 可 以 使 用 。 当 选 
择 一 个 行为 时 ， 束 会 打开 参数 对 话 框 。 

> ”|[ 呈 J: 单 击 该 按钮 ， 删 除 当前 选择 的 行为 。 

> “全 | 和 WY: 用 于 在 行为 列表 中 移动 选 定 的 动作 ， 改 变 执 行动 作 的 顺序 。 给 定 事 件 
的 动作 是 以 特定 的 顺序 执行 的 。 

: 单 击 行为 列表 中 所 选 事件 名 称 劳 边 的 箭头 按钮 时 出 现 的 弹出 却 菜 单 

(如 图 7-1 所 示 ) ， 其 中 包含 可 以 触发 该 动作 的 所 有 事件 。 只 有 在 选择 了 行为 列 

表 中 的 汞 个 事件 时 才 喧 示 此 采 单 .根据 所 选 对 名 的 不 同 , 显示 的 事件 也 有 所 不 同 。 

如 果 示 显示 预期 的 事件 ， 则 检查 是 否 选 择 了 正确 的 网 页 元 素 或 标签 。 一 个 对 象 可 

以 有 多 个 触发 事件 。 通 季 一 个 事件 是 针对 页 面 对 象 或 标记 而 言 。 


7.1.3 认识 事件 


每 个 浏览 右 都 提供 一 组 事件 ， 这 些 事件 可 以 与 “行为 ”和 面板 所 提供 的 动作 相关 联 。 当 
Web 页 的 访问 者 与 页 和 面 进行 交互 时 《如 单 击 东 个 链接 )， 浏 览 句 生成 事件 ， 这 些 事件 可 用 
于 调用 引起 动作 发 生 的 JavaScript 函数 。 没 有 用 户 交 互 也 可 以 生成 事件 ， 例 如 设置 页 面 每 
10s 上 自动 重新 载 入 。 事 件 触 发 动作， 这 吏 是 行为 ，Dreamweaver 提供 许多 可 以 使 用 这 些 事 
件 触 发 的 常用 动作 。 下 面 简要 介绍 网 页 制作 过 程 中 常用 的 事件 : 

> ”onAbort: 当 用 户 终 止 浏览 右 对 一 幅 图 像 的 载 入 时 会 触发 该 事件 。 例 如 ， 在 图 像 

下 载 过 程 中 ， 用 户 单 击 浏览 器 的 “ 集 止 ”按钮 时 ， 束 会 触发 该 事件 。 

> onBlur: 当 指 定 的 元 素 不 再 是 用 户 交 互 行为 的 焦点 时 ， 触 发 该 事件 。 例 如 ， 光 标 
原 停 留 在 文本 框 中 ， 当 用 户 单 击 此 文本 框 之 外 的 对 象 时 ， 触 发 该 事件 。 
onChange: 当 用 户 改 变 了 页 和 面 中 的 值 时 ， 触 发 该 事件 。 
onClick: 当 用 户 单 击 在 页 面 上 茶 一 特定 的 元 素 时 ， 和 触发 该 事件 。 
onDblClick: 当 用 户 双击 在 页 面 上 某 一 特定 的 元 素 ， 和 触发 该 事件 。 
onError: 当 浏 览 器 在 载 入 页 面 或 向 像 过 程 中 发 生 错误 时 ， 触 发 该 事件 。 
onFocus: 本 事件 与 onBlur 事件 正好 相反 ， 当 用 户 将 光标 定位 在 指定 的 焦点 时 ， 
触发 该 事件 。 
onKeyDown: 当 用 户 按 下 键盘 上 的 一 个 键 ， 无 论 是 否 释放 该 键 都 会 触 友 该 事件 。 
onKeyPress: 当 用 户 按 下 键盘 上 的 一 个 键 ， 然 后 释 放 该 键 时 ， 触 发 该 事件 。 访 事 
件 可 以 看 作 是 onKeyUp 和 onKeyDown 两 个 事件 的 组 合 。 
> onKeyUp: 当 用 户 按 下 键盘 上 的 一 个 键 ， 在 释放 该 键 时 ， 触 友 该 事件。 
> ”onLoad: 当 一 幅 岁 像 或 页 面 完成 载 入 之 后 ， 触 发 该 事件 。 
> “onMouseDown: 当 用 户 按 下 羽 标 左 键 尚未 释放 时 ， 触 发 该 事件 。 
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> ”onMouseOver: 当 用 户 将 鼠标 指针 移 开 指定 元 素 的 光 围 时 ， 触 发 该 事件 。 
> onMouseUp: 当 按 下 的 忌 标 按钮 被 释放 时 ， 和 触发 该 事件 。 
> ”onMove: 当 浏 览 窗 口 或 框架 移动 时 ， 触 友 该 事件 。 
> ”onReadyStateChange: 当 指 定 的 状态 发 生 改 变 时 ， 触 发 该 事件 。 可 能 的 元 到 状态 
包括 : 未 初始 化 “uninitialiazed) 、 载 入 〈loading) 和 完成 (complete)。 
onReset: 当 一 个 表单 中 的 数据 被 重 置 时 ， 触 上 友 该 事件 。 
onScroll: 当 用 户 利用 深 动 条 或 第 关键 上 下 深 动 显示 内 容 时 ， 触 发 该 事件 。 
onSelect: 当 用 户 从 文本 框 中 选取 文本 时 ， 触 发 该 事件 。 
onSubmit: 当 用 户 提 交 表 单 时 ， 触 太 访 事件。 
onUnload: 当 用 户 离 开 页 耐 时 ， 触 发 该 事件 。 

请 注意 ， 大 多 数 事件 只 能 用 于 特定 的 页 面 元 系 。 在 要 和 合 明 对 于 给 定 的 页 面 元 素 及 给 定 
的 浏览 器 文 持 哪些 事件 , 请 在 文档 中 插入 该 页 元 票 并 问 其 附加 一 个 行为 , 然后 租 看 “行为 ” 
面板 中 的 “事件 ” 强 出 式 采 单 。 


7.2 应 用 行为 


V VvV VvV vv YY 


7.2.1 安装 第 三 方 行为 


Dreamweaver CS6 最 有 用 的 功能 之 一 束 是 它 的 扩展 性 ， 即 它 为 精通 JavaScript 的 用 户 
提供 了 编写 JavaScript 代码 的 机 会 ， 这 些 代 但 可 以 扩展 Dreamweaver 的 功能 。 然 而 要 创建 
行为 ， 必 须 精 通 HTML 和 JavaScript 语言 ， 这 有 很 大 的 难度 。 好 在 网 上 有 许多 可 用 的 第 三 
方 行 为 供 下 载 。 

耕 要 从 Exchange 站 点 下 载 和 安装 新 行为 ， 请 执行 以 下 操作 : 

(1) 打开 “行为 ”面板 并 单 击 “ 添 加 行为 ”按钮 直 ， 在 弹出 滋 单 中 执行 “获取 更 多 
行为 ” ”这 时 会 日 动 局 动 浏览 费 ， 连 接 到 Dreamweaver 的 官方 站 点 下 载 行 为 。 

(2) 下 载 并 解压 所 需 的 行为 扩展 包 。 

(3) 将 解压 的 文件 存 入 Dreamweaver 安装 目录 下 的 Configuration\Behaviors\Actions 
又 导 ts 

(4) 重新 启动 Dreamweaver CS6。 


7.2.2 绑 定 行为 


行为 可 以 绑 定 到 整个 文档 《〈 即 附加 到 body 标签 )、 链 接 、 图 像 、 表 单元 素 或 多 种 其 他 
HTML 元 素 中 的 任何 一 种 ， 但 是 不 能 将 行为 绑 定 到 纯 文本 。 诺 如 <p> 和 <span> 等 标签 不 能 
在 浏览 磺 中 生成 事件 ， 因 此 无 法 从 这 些 标签 触 肥 动作 。 

可 以 为 每 个 事件 指定 多 个 动作 。 动 作 以 它们 在 行为 面板 的 动作 列表 中 列 出 的 顺序 发 
生 。 绑 定 行为 的 操作 步骤 如 下 : 

(1) 执行 “窗口 ”| “行为 ”命令 ， 打 开 “ 行 为 ”面板 。 
(2) 在 页 面 上 选择 一 个 元 素 ， 例 如 一 个 图 像 或 一 个 链接 等 非 纯 文 本 元 系 。 
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(3) 单 击 “ 洪 加 行为 ”按钮 吉 ， 从 弹出 式 末 早 中 选择 一 个 行为 ， 如 图 7-2 所 示 。 不 
能 选择 亲 单 中 灰 显 的 行为 。 它们 灰 喧 的 原因 可 能 是 当前 文档 中 不 存在 所 需 的 对 象 。 如 过 所 
选 的 对 象 无 可 用 事件 ， 则 所 有 行为 都 灰 显 。 

(4) 选择 某 个 动作 时 ， 将 出 现 一 个 对 话 框 ， 显 示 该 动作 的 参数 和 说 明 。 

(5) 为 该 动作 输入 参数 ， 然 后 单 击 “确定 ”。 

(6) 触发 该 动作 的 默认 事件 显示 在 事件 栏 中 。 如 条 这 不 是 所 需 的 触发 事件 ， 则 可 以 
单 击 事件 名 称 后 面 的 下 拉 角 头 从 事件 弹出 式 沫 单 中 选择 所 需要 的 事件 ， 如 图 7-3 所 示 。 

属性 | 行为 | 标签 《imgy 


国有 
的 国 介 


弹出 信息 


恢复 充 换 图 像 
打开 训 蜗 器 窗口 


改变 属性 
效果 


检查 插件 


设置 文本 有 
调用 JavaScript 


转 到 UEL 
预先 载 作 图像 


获取 更 多 行 洲 ... 
图 7-2 选择 行为 图 7-3 ”选择 事件 


根据 所 选 对 和 象 的 不 同 ,显示 在 事件 弹出 式 末 蛙 中 的 事件 将 有 所 不 同 。 如 有 果 未 显示 预期 
的 事件 ， 则 检查 是 否 选 择 了 正确 的 对 象 。 一些 事件 (例如 onMouseOver) 在 其 前 面 显示 有 
<A>， 代 表 此 事件 仅 用 于 链接 ， 和 在 所 选 对 象 不 是 链接 时 这 些 事件 将 不 可 选 。 
行为 不 能 附加 到 纯 文 本 , 但 是 可 以 将 行为 附加 到 链接 。 因 此 , 大 要 将 行为 附加 到 文本 ， 
最 简单 的 方法 就 是 问 文 本 添加 一 个 空 链接 (不 指 问 任 何 内 容 )， 然 后 将 行为 附加 到 该 链接 
上 。 大 要 将 茶 个 行为 附加 到 所 选 的 文本 ， 请 执行 以 下 操作 : 
(1) 在 属性 检查 右 的 “链接 ”文本 框 中 输入 javascript:;。 一 定 要 包括 上 骨 号 和 分 号 。 
也 可 以 在 “链接 ”文本 框 中 改 用 数字 符号 (机 。 使 用 数 宇 符 号 的 问题 在 于 当 访 问 者 单 
击 该 链接 时 ， 某 些 浏 览 右 可 能 跳 到 页 的 顶部 。 单 击 JavaScript 衬 链 接 不 会 在 页 面 上 产生 
任何 效果 ， 因 此 JavaScript 方法 通常 更 可 取 。 
(2) 在 文本 仍 处 于 选中 状态 时 打开 “行为 ”和 面板 。 
(3) 从 “动作 ”弹出 亲 单 中 选择 一 个 动作 ， 输 入 该 动作 的 参数 ， 然 后 选择 一 个 触 友 
该 动作 的 事件 。 
1.2.3 修改 行为 
在 附加 了 行为 之 后 , 可 以 更 改 触发 动作 的 事件 、 洪 加 或 删除 动作 以 及 更 改动 作 的 参数 。 
修改 行为 的 的 操作 步骤 如 下 : 
(1) 执行 “窗口 ”| “行为 ”命令 ， 打 开 “ 行 为 ”面板 。 
(2) 选择 一 个 绑 定 有 行为 的 对 象 。 
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(3) 投 需 要 执行 以 下 操作 : 
> ” 右 要 编辑 动作 的 参数 ， 则 双击 该 行为 名 称 ， 然 后 更 改 强 出 对 话 框 中 的 参数 。 
> “在 要 更 改 给 定 事 件 的 多 个 行为 的 顺序 ， 选 择 茶 个 行为 后 单 击 会 或 按钮 。 
> “在 要 删除 菏 个 行为 ， 将 其 选中 后 单 击 “ 删 除 事 件 ” 按 钮 三 或 按 Delete 键 。 


7.3 Dreamweaver 的 内 置 行 为 


执行 “窗口 ”| “行为 ”命令 ， 弹 出 “行为 ”面板 ， 单 击 “ 行 为 ”面板 中 的 “添加 行 
为 ”按钮 ts， 则 会 弹出 行为 列表 ， 可 从 中 选择 一 个 行为 添加 到 当前 对 象 的 “行为 ”面板 
中 。 在 文档 窗口 中 选择 的 对 象 不 一 样 ， 则 可 以 使 用 的 行为 也 不 一 样 。 给 一 个 对 象 谨 加 行为 
时 ， 在 “行为 ”面板 的 标题 栏 中 会 显示 该 对 象 的 HTML 标记 ， 在 行为 列表 中 不 可 用 的 行 
为 都 以 灰色 显示 。 本 节 将 对 Dreamweaver CS6 内 置 行为 的 具体 使 用 方法 进行 说 明 。 


7.3.1 调用 JavaScript 
“调用 JavaScript” 动 作 人 允许 用 户 使 用 行为 面板 指定 当 发 生 某 个 事件 时 应 该 执行 的 目 


定义 函数 或 JavaScript 代码 行 。JavaScript 代 人 码 可 以 是 用 户 目 己 编写 或 使 用 Web 上 多 个 侈 
费 的 JavaScript 库 中 提供 的 代码 。 下 面 介绍 调用 JavaScript 行为 的 步骤 。 

01 5 新 建 一 个 HTML 文档 ， 插 入 一 个 表单 域 和 一 个 按钮 ， 如 图 7-4 所 示 。 

02 选中 按钮 并 打开 “行为 ”面板 。 

03 和 单 击 “添加 行为 ”按钮 .车 ， 从 行为 弹出 表单 中 选择 “调用 JavaScript” 命 令 ， 
弹出 “调用 JavaScript” 对 话 框 ， 如 图 7-5 所 示 。 


ow EE (XHITHL)* -= 口 其 


调用 JavaScript 


body? form#forml» 


图 7-4 插入 表单 按钮 图 7-5 “调用 JavaScript” 对 话 框 


04 输入 要 执行 的 JavaScript:“alert(" 欢 迎 使 用 Dreamweaver CS6")”。 
03 和 单 击 “确定 ”。 此 时 “行为 ”面板 显示 如 图 7-6 所 示 。 
至 此 实例 制作 完毕 ， 按 F12 键 打开 浏览 器 预览 效果 。 单 击 “ 提 交 ” 按 钮 ， 即 可 弹出 一 
个 对 话 框 ， 如 图 7-7 所 示 。 


尾 性 [行为 | 标签 <input》 
==| 至 三 十。 a a v 


企 欢迎 使 用 Dreamweaver [SB 


图 7-6 添加 行为 后 的 “行为 ”面板 图 7-7 “调用 JavaScript” 行 为 的 效果 
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7.3.2 改变 属性 
“改变 属性 ”动作 的 作用 是 动态 地 改变 某 一 个 对 象 的 属性 值 。 下 面 介绍 改变 属性 的 步 


01 打开 “插入 ”浮动 面板 ， 并 切换 到 “常用 ”和 面板 ， 然 后 单 击 “插入 div 标签 ” 
图 标 ， 打 开 对 应 的 对 话 框 。 

02 在 “插入 ”下 拉 列 表 框 中 选择 “在 插入 点 ”， 在 “ID” 文 本 框 中 输入 标签 的 名 称 ， 
本 例 输入 dd。 然 后 单 击 “ 狐 建 CSS 规则 ”按钮 ， 弹 出 “新 建 CSS 规则 ”对 话 框 。 

03 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “标签 ”"， 在 “选择 器 名 称 ” 下 拉 列 表 中 选择 
div， 然 后 单 击 “人 确定 ”按钮 打开 对 应 的 规则 定义 对 话 框 。 

04 在 对 话 框 左 侧 的 分 类 列表 中 选择 “区 块 "， 设 置 文 本 对 齐 方 式 为 “居中 对 齐 ”， 
然后 单 击 “ 确 定 ” 按 钮 。 

03 在 页 面 中 插入 的 div 标签 中 插入 文字 ， 并 在 属性 面板 上 设置 文本 的 格式 为 “ 标 
题 1”。 如 图 7-8 所 示 。 
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图 7-8 在 div 标签 中 插入 文子 


06 在 标签 选择 器 中 单 击 <div> 标 签 ， 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 二， 
并 从 行为 弹出 式 琳 单 中 执行 “改变 属性 ”命令 ， 弹 出 “改变 属性 ”对 话 框 。 

07， 在 “元 素 类 型 ”下 拉 列 表 中 选择 DIV， 在 “元 素 D” 下 拉 列 表 中 选择 DIV “dd”， 
在 “属性 ”下 拉 列 表 中 选择 backgroundColor， 并 在 “新 的 值 ” 文 本 框 中 输入 新 的 颜色 值 
#FF0， 对 各 项 参数 具体 设置 如 图 7-9 所 示 。 


元 未 类 型 UU 对 对 


元 素 ID: |DIY “dd” 


尾 性 : © 选择 : backer oundCol or 
C 〇 输入 : 
新 的 值 : | 


图 7-9 “改变 属性 ”对 话 框 


各 项 参数 说 明 如 下 : 
> ” “元 素 类 型 ”: 用 于 选择 要 改变 属性 的 对 象 类 型 ， 有 LAYER、DIV、SPAN 等 。 
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> “元 素 也”: 在 对 象 类 型 中 设置 了 对 象 的 类 型 后 ， 命 名 对 和 象 选择 框 列 出 了 可 以 
改变 属性 的 对 象 。 
> “ “选择 ”: 选中 此 项 ， 则 可 以 从 后 面 的 列表 项 中 选择 一 项 要 改变 的 属性 ， 然 后 再 
从 后 面 的 浏览 右 列 表 中 选择 一 种 浏览 右 来 浏览 网 页 。 
> “输入 ”: 选中 此 项 ， 束 可 以 直接 在 后 面 的 编辑 框 中 输入 要 改变 的 对 象 属性 。 
> “ 狐 的 值 ”: 设置 所 选择 对 象 新 的 属性 值 。 
08 单 击 “确定 ”按钮 天 财 对 话 框 ， 并 在 “行为 ”和 面板 为 行为 选择 需要 的 事件 
onMouseOver。 
039 制作 完毕 ， 可 以 授 下 F12 键 打开 浏览 器 进行 测试 。 在 浏览 器 中 将 鼠标 移 到 
J 如 图 7-10 所 示 。 


图 7-10 ”改变 属性 后 的 效 来 


7.3.3 检查 插件 


当 一 个 站 点 的 网 页 中 设置 了 某 些 插件 时 ， 应 通过 “检查 插件 ”动作 检查 用 户 的 浏览 费 
中 是 否 安装 了 这 些 插件 (Plug in)， 如 果 用 户 安 钱 了 这 些 插 件 ， 则 路 转 到 一 个 网 页 中 ， 如 
果 没 有 安装 这 些 插件 ， 则 不 进行 跳 转 或 跳 转 到 另 一 个 网 页 。 如 果 不 进行 检查 ， 当 用 户 没 有 
安 闭 这 些 插件 的 播放 右 时 束 无 法 浏览 网 页 中 的 插件 。“ 检 查 插件 ”动作 功能 就 是 根据 浏览 
需 安 猜 插件 的 情况 打开 指定 的 网 页 。 

使 用 “ 检 碍 插件 ”动作 的 步骤 如 下 : 

(1) 选择 一 个 对 象 并 打开 “行为 ”面板 。 

(2) 单 击 “ 添 加 行为 ”按钮 并 从 行为 弹出 式 菜单 中 执行 “检查 插件 ”命令 ， 弹 出 “ 检 
查 插件 ”对 话 框 ， 如 图 7-11 所 示 。 


插件 : 选择 : 
〇 输入 : 
如 果 有 ， 转 到 URL: 呵 选 ) 


否则 ， 转 到 URL: 
口 ”如 果 无 法 检测 ， 则 始终 转 到 第 一 个 URL 


图 7-11 “和 检 奏 插 件 ” 对 话 框 


] 22 


(3) 对 该 对 话 框 各 个 选项 进行 设置 ， 各 选项 的 功能 介绍 如 下 : 
> “选择 ”; 选中 此 项 ， 可 以 从 后 面 的 插件 下 拉 列 表 框 中 选择 一 种 插件 。 
> “输入 ”: 选中 此 项 ， 可 以 下 接 在 后 面 文本 框 中 输入 插件 的 类 型 ， 类 型 


Bh 


口 
Flash、Shockwave、LiveAudio、Netscape Media Player、Quicktime 等 $ 种 类 型 插 


(= 
> “如 末 有 ， 转 到 URL”: 如 来 找到 前 面 设置 的 插件 类 型 ， 则 跳 转 到 后 面 文本 框 
中 设 定 的 网 页 。 


> “ “人 否则 ， 转 到 URL”: 如 采 没 有 找到 前 和 面 设置 的 插件 类 型 ， 则 跳 转 到 后 耐 文本 
框 中 设 定 的 网 页 。 知 要 让 不 具有 访 插 件 的 访问 者 留 在 同一 页 上 ， 请 将 此 域 留 空 。 

> “ “如果 无 法 检测 ， 则 始终 转 到 第 一 个 URL”: 选择 该 项 后 ， 如 果 不 能 进行 检查 
插件 ， 则 跳 转 到 第 一 个 URL 地 址 设 定 的 网 页 。Macintosh 上 的 Internet Explorer 
中 不 能 实现 插件 检测 。Windows 上 的 Internet Explorer 中 也 检测 不 到 大 多 数 插 
件 。 因 此 ， 此 选项 只 适用 于 Internet Explorer。Netscape Navigator 总 是 可 以 检测 
到 插件 。 

(4) 单 击 “ 确 定 ” 投 钮 ， 之 后 为 动作 选择 所 需 的 事件 。 


7.3.4 ”Spry 效果 


在 如 今 Web 2.0 盛行 、AJAX 流行 的 时 代 背 景 下 ，Adobe 将 轻 量 级 的 AJAX 框架 Spry 
集成 到 了 Dreamweaver CS6 中 ， 这 无 疑 是 令 广 大 网 页 设计 者 兴奋 的 事情 。 本 节 只 简要 介绍 
Spry 所 市 来 的 Ajax 视觉 效果 。 效 果 可 以 修改 元 聚 的 不 透明 度 、 缩 放 比 例 、 位 置 和 样式 属 
性 (如 背景 闫 色 )。Dreamweaver CS6 内 置 的 十 多 种 精美 的 Spry 效果 可 直接 应 用 于 使 用 
JavaScript 的 HIML 页 面 上 几乎 所 有 的 元 系 ， 轻 松 地 回 页 和 面 元 素 添 加 视觉 过 渡 ， 而 无 需 
其 它 目 定义 标签 。 由 于 这 些 效果 都 基于 Spry， 因 此 当 用 户 单 击 应 用 了 效果 的 对 象 时 ， 只 
有 对 象 会 进行 动态 更 新 ， 而 不 会 刷新 整个 HTML 页 和 面 。 

如 果 要 问 某 个 元 素 应 用 效果 ,该 元 素 当 前 必须 处 于 选 定 状态 , 或 者 它 必 须 具 有 一 个 有 
效 的 ID。 如 果 该 元 素 未 选中 , 旦 没有 有 效 的 ID 值 , 则 需要 向 HTML 代码 中 添加 一 个 ID 
值 。 因 此 ， 对 页 面 元 素 应 用 Spry 效果 的 一 般 步 骤 如 下 : 

(1) 选择 要 应 用 效果 的 内 容 或 布局 对 象 ， 也 可 以 直接 进入 下 一 步 。 
(2) 单 击 “ 行 为 ”面板 中 的 “添加 行为 ”按钮 由 ， 从 弹出 玉 单 中 选择 “效果 ” 并 
在 效果 子玉 单 下 选择 需要 的 效果 。 
(3) 从 “目标 元 素 ” 沫 单 中 选择 要 应 用 效果 的 对 象 的 ID 。 如 有 条 已 经 选择 了 一 个 对 象 ， 
请 选择 “< 当前 选 定 内 容 >”。 
(4) 设置 对 话 框 中 的 其 他 内 容 。 
下 面 简要 介绍 一 下 Dreamweaver CS6 中 儿 种 常用 的 Spry 效果 的 功能 和 参数 设置 。 
@ 增 大 / 收 绚 : 使 元 素 变 大 或 变 小 。 此 效果 适用 于 address、dd、div、dl、dt、form、 
p、ol、ul、applet、center、dir、menu 或 pre 对 象 。 其 属性 设置 对 话 框 如 图 7-12 
所 示 。 
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目标 元 素 :|EEEREESDE 
效果 持续 时 间 : |1000 ”| 毫秒 


效果 : | 收缩 攻 


收缩 到 : | 居中 对 齐 (C) v 
口 ] 切换 效果 


图 7-12 “ 增 大 /收缩 ”对 话 杠 


在 “ 增 大 /收缩 ”对 话 框 的 “目标 元 素 ” 衣 时 中 选择 某 个 对 象 风 ID 。 如 采 已 经 在 窗口 
中 选择 了 一 个 对 象 ， 则 选择 “< 当前 选 定 内 容 >”。 

在 “ 效 来 持续 时 则 ”文本 框 中 指定 效 末 持续 的 时 间 ， 单 位 为 量 秒 。 

在 “ 效 末 ”下 拉 列 表 框 中 选择 要 应 用 的 效果 。 

分 别 在 “ 增 大 目 / 收 绑 目 ”和 “ 增 大 到 / 收 到 ”文本 框 中 ， 以 百分比 大 小 或 像素 值 指 

定 对 象 在 效果 开始 时 和 结束 时 的 大 小 。 
在 “ 增 大 到 / 收 爱 到 ”列表 框 中 选择 元 素 增 大 或 收缩 到 的 位 置 ， 可 以 是 页 面 的 左上 和 
或 是 页 面 的 中 心 。 

如 条 硕 望 连续 单 击 可 以 在 增 大 或 收缩 间 切 换 ， 请 选中 “切换 效果 ” 复 选 框 。 

@ 挤 压 : 使 元 系 从 页 面 的 左上 角 消 失 。 此 效果 仅 适 用 于 address、dd、div、dl、dt、 
form、img、p、ol、ul、applet、center、dir、menu 或 pre 对 象 。 

@ 显示/ 渐 隐 : 使 元 素 显示 或 渐 隐 。 此 效果 适用 于 除 applet、body、iframe、object、 
tr、tbody 或 由 以 外 的 其 他 HTML 对 象 。 

在 “ 渐 隐 日 /显示 目 ” 文 本 框 中 定义 显示 此 效果 所 需 的 不 透明 上 度 百 分 比 。 

在 “ 渐 隐 到 /显示 到 ”文本 框 中 设置 要 渐 隐 到 的 不 透明 度 上 自分 比 。 

如 果 选 择 “ 切 换 效 果 ” 则 该 效果 是 可 逆 的 ， 即 连续 单 击 可 从 “ 渐 隐 ”转换 为 “显示 ” 

或 从 “显示 ”转换 为 “ 渐 隐 ”。 

@ 哆 动 : 模拟 从 左 问 右 哆 动 元 系 。 此 效果 仪 适 用 于 address、blockquote、dd、div、 
dl、dt、feldset、ftorm、hl、h2、h3、ph4、ho5、ho、ltrame、1lmg、object、P、 
ol、uUl、1、applet、dir、hr、menu、Ppre 或 table 对 象 。 

@ 滑动 :加 上 或 癌 下 移动 元 素 。 此 效果 仅 适 用 于 blockquote .dddiv、form 或 center 
对 象 。 滑 动 效 素 要求 在 要 请 动 的 内 容 周 于 有 一 个 “div> 标签 。 

分 别 在 “上 滑 目 /下 请 目 ” 和 “上 上 清 到 /下 滑 到 ”文本 框 中 ， 以 百分比 或 像素 值 形式 定 

义 起 始 滑动 点 和 结束 滑动 点 。 

如 果 和 希望 通过 连续 单 击 实现 上 下 滑动 ， 请 选中 “切换 效果 ”。 

@ 讶 帘 : 模拟 百叶 窗 效 末 ， 问 上 或 同 下 浚 动 百 叶 窗 来 隐 蔬 或 显示 元 素 。 此 效 末 仅 
适用 于 address、 dd、 div、 dl、 dt、 form、 hl、h2、h3、h4、h5、h6、p、ol、 ul、 
li、applet、center、dir、menu 或 pre 对 象 。 

在 “同上 这 帘 目 / 同 下 迟 帘 上 自 ”文本 框 中 ， 以 百分比 或 像素 值 形式 定义 慷 帘 的 起 始 深 

动 点 。 这 些 值 是 从 对 象 的 项 部 开始 计算 的 。 
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在 “ 问 上 逐 帘 到 / 癌 下 这 帘 到 ” 域 中 ， 以 百分比 或 像素 值 形 式 定 义 遮 帘 的 结束 滚动 点 。 
这 些 值 是 从 对 象 的 顶部 开始 计算 的 。 

如 采 硕 望 连续 单 击 实现 上 下 滚动 ， 请 选择 “切换 效果 ”。 

@ 局 党 磊 色 : 更 改元 际 的 背景 颜色 。 此 效果 适用 于 applet、body、frame、frameset 

或 noframes 以 外 的 其 他 HTML 对 象 。 

在 “起 始 颜 色 ” 和 “结束 颜色 ”后 面 的 颜色 井中 分 别 选 择 开 始 高 完 显 示 、 络 束 局 完 显 
未 的 闫 色 。 

在 “应 用 效果 后 的 颜色 ”后 和 面 的 闫 色 井 中 选择 该 对 象 在 完成 蜗 有 党 显示 之 后 的 磊 色 。 

如 来 希望 通过 连续 单 击 来 循环 使 用 局 腕 磊 色 ， 选 择 “ 切 换 效 末 ” 选 项 。 

与 其 他 行为 一 样 ， 可 以 将 多 个 效果 行为 与 同一 个 对 象 相关 联 以 产生 有 趣 的 结 

vy 注意 : 

2 当 使 用 效果 时 ， 系 统 会 在 代码 视图 中 将 不 同 的 代码 行 添加 到 您 的 文件 中 。 

其 中 的 一 行 代码 用 来 标识 SpryBffects. js 文件 ， 该 文件 是 包括 这 些 效果 所 必需 的 。 

请 不 要 从 代码 中 删除 该 行 ， 否 则 这 些 效果 将 不 起 作用 。 


7.3.5 拖 动 AP 元 素 


“ 拖 动 AP 元 素 ” 动 作 只 对 网 页 中 的 AP 元 素 起 作用 ， 它 允许 将 AP 元 素 拖 放 到 网 页 
中 特定 的 位 置 。 使 用 此 动作 ， 可 以 创建 拼 板 游戏 、 滑 块 控 件 和 其 他 可 移动 的 界面 元 素 。 
使 用 “ 拖 动 AP 元 素 ” 动 作 的 步骤 如 下 : 
(1) 在 文档 窗口 的 “设计 ”视图 中 绘制 一 个 AP 元 素 对 象 ， 并 在 属性 面板 上 为 AP 元 
素 对 象 设 置 名 称 。 
(2) 单 击 “ 文 档 ” 寄 口 底部 标签 选择 需 中 的 <body> 选择 body 标签 。 
(3) 打开 行为 面板 ， 单 击 “ 添 加 行为 ”按钮 直 ， 并 从 动作 弹出 式 菜 单 中 执行 “ 拖 动 
AP 元 素 ” 命 令 ， 弹 出 “ 拖 动 AP 元 素 ” 对 话 框 ， 如 图 7-13 所 示 。 


证 
元 iv mi 加 
移动 : | 不 限制 | 


放下 目标 : 去 : | | 上 :[ | 


靠 齐 距离 : 像素 接近 攻 下 目标 


图 7-13 “ 拖 动 AP 元素” 对话 框 的 基本 设置 


(4) 设 萤 对话 框 中 各 个 选项 ， 该 对 话 框 中 由 “基本 ”和 “ 融 级 ”两 个 标签 组 成 ， 主 
要 选项 的 功能 介绍 如 下 : 
> “AP 元 么 ”: 选择 “ 拖 动 AP 元 么 ”行为 的 对 象 。 单 击 右 侧 的 下 拉 键 ， 在 下 拉 
列表 框 内 列 出 了 本 页 面 中 所 有 AP 元 到， 从 中 选择 要 控制 的 AP 元 素 。 
> “移动 ”: AP 元 素 的 移动 方式 。 在 下 拉 列 表 中 可 以 选择 “不 限制 ”或 “限制 ”。 
当选 择 “ 限 制 ” 时 ， 对 话 框 中 会 添加 “上 ”、“ 下 ”、“ 左 ”和 “ 右 ” 四 个 参数 。 
在 参数 后 和 面 的 文本 框 中 项 入 数字 ， 单 位 是 像 和 水 ， 即 确定 了 AP 元 素 的 拖 动 范围 。 
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它们 分 别 表 示 AP 元 素 移动 范围 距 其 初始 位 置 《AP 元 素 拖 动 衣 ，AP 元 素 的 左上 
角 位 置 ) “向 上 ”、“ 向 下 ”、“ 向 左 ”、“ 向 右 ” 的 距离 。 

> “ 拖 放 目标 ”; 目的 地 位 置 。 在 “ 左 ” 和 “上 ”后 的 文本 框 内 分 别 输入 该 位 置 距 
页 面 左 端 和 上 端的 距离 ， 单 位 是 像素 。 后 面 有 “取得 目前 位 置 ” 按 钮 ， 单 击 可 以 
在 文本 框 中 得 到 AP 元 素 目 前 的 位 置 参数 。 

> ““ 靠 齐 距 离 ”: 产生 吸附 效果 的 像素 数 。 表 示 当 距 目 标 位 置 的 距离 为 设置 值 时 ， 
自动 吸附 到 目标 位 置 。 

> ”对 于 简单 的 拼 板 游戏 和 布景 处 理 ， 到 此 步骤 为 止 即 可 。 若 要 定义 AP 元 素 的 拖 
动 控制 点 、 在 拖 动 AP 元 素 时 跟 躁 其 移动 以 及 在 放下 AP 元 素 时 触发 动作 ， 请 
单 击 “ 高 级 ”标签 切换 ， 如 网 7-14 所 示 。 主 要 选项 的 功能 介绍 如 下 : 


和 过 制 点 
抑 动 时 : 将 苑 素 置 于 顶层 ， 热 后 | 留 在 最 上 方 。 


呼叫 Javaseript: [ | 
放下 时 : 呼叫 Jawaseript: [| 只 有 在 靠 齐 时 


图 7-14 “ 拖 动 AP 元 隶 ” 对 话 框 的 局 级 设置 


> “ 拖 搜 控制 点 ”: 在 右 侧 下 拉 列 表 框 内 可 以 选择 “整个 元 素 ” 和 “元 素 内 的 区 域 ”。 
指定 访问 者 单 击 AP 元 素 可 以 触发 动作 的 区 域 , 奉 必须 单 击 AP 元 素 的 特定 区 域 
才能 拖 动 AP 元 素 ， 则 选择 “元 素 内 的 区 域 ”;， 奎 单 击 AP 元 素 中 的 任意 位 置 
拖 动 此 AP 元 素 ， 则 不 要 选择 此 项 。 

“ 拖 搜 时 ”: 选中 后 面 的 复 选 框 ， 则 在 拖 动 时 ， 拖 动 的 AP 元 素 始终 在 最 上 层 。 
“然后 ”: 拖 动 后 的 位 置 。 在 右 侧 的 下 拉 列 表 中 可 以 选择 “ 留 在 最 上 方 ” 或 “ 恢 
复 Z 轴 ”。 

“呼叫 JavaScript”: 拖 动 AP 元 素 时 要 执行 的 脚本 程序 。 

“放下 时 ， 呼 叫 JavaScript”: 当 AP 元 素 被 移动 到 目标 位 置 时 调用 的 脚本 程序 。 
如 果 只 有 在 AP 元 素 到 达 拖 放 目 标 时 才 执 行 该 JavaScript， 则 选择 “只 有 在 靠 齐 
ps 

(5) 单 击 “ 确 定 ” 之 后 为 动作 选择 所 需 的 事件 。 


7.3.6 转 到 URL 


“ 转 到 URL” 行 为 的 网 页 满足 特定 的 触发 事件 时 ， 会 跳 转 到 特定 的 URL 地 址 ， 并 显 
示 设 定 的 网 页 。 

使 用 “ 转 到 URL” 动 作 的 步骤 如 下 : 

(1) 选择 一 个 对 象 ， 并 打开 行为 面板 。 
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(2) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 由 ， 并 从 行为 弹出 式 染 单 中 执行 “ 转 
到 URL” 命令， 弹出 “ 转 到 URL” 对 话 框 ， 如 图 7-15 所 示 。 该 对 话 框 中 的 两 个 选项 的 功 


能 如 下 : 


> “打开 在 ”: 选择 网 页 打开 的 窗口 。 的 认 窗 口 为 “ 主 窗 口 ”， 即 浏览 喜 的 主 窗口 。 
厂 正 在 编辑 的 网 页 有 多 个 帧 (实际 上 束 是 究 口 )， 则 每 个 帧 的 名 称 将 在 “打开 在 ” 


列表 框 中 ， 从 该 列表 框 可 选择 在 哪个 帆 中 打开 网 页 。 


本 


如 果 任 何 框架 命名 为 top、blank、self 或 parent， 则 此 动作 可 能 产生 


意 想 不 到 的 结果 。 浏览 器 有 时 将 这 些 名 称 误 认 为 保留 的 目标 名 称 。 设置 对 话 框 中 各 个 


选项 。 


> URL: 输入 要 打开 的 网 页 。 


[Em 


图 7-15 “ 转 到 URL” 对 话 框 


第 

(3) 早 击 “人 确定 ”按钮 ， 之 后 为 动作 选择 所 需 的 事件 。 二 

童 

7.3.7 跳 转 菜单 行 
当 使 用 “插入 ”|“ 表 单 ”|“ 跳 转 京 单 ” 创 建 跳 转 京 单 时 ，Dreamweaver 创建 一 个 及 

单 对 象 并 加 其 附加 一 个 “ 跳 转 荣 单 ”( 或 “ 跳 转 这 单 转 到 妨 行为 。“ 跳 转 荣 单 ” 动 作 只 有 六 


在 文档 窗口 中 选择 一 个 跳 转 菜单 后 才能 使 用 , 可 以 通过 该 动作 修改 跳 转 菜单 及 改变 默认 的 
触发 事件 。 在 文档 窗口 中 插入 一 个 跳 转 菜单 后 ,该 跳 转 菜单 会 作为 一 个 动作 出 现在 其 对 应 


的 “行为 ”面板 中 ， 对 应 的 事件 是 onChange。 
使 用 “ 跳 转 菜单 ”动作 的 步骤 如 下 : 
(1) 选择 一 个 路 转 菜单 对 象 ， 并 打开 “行为 ”面板 。 


(2) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 吉 ， 并 从 动作 弹出 式 末 单 中 执行 “ 跳 


转 末 单 ” 命 令 ， 弹 出 “ 跳 转 末 日 ” 对 话 框 ， 如 图 7-16 所 示 。 


区 本: 
选择 时 ， 转 到 WRL: | 


打开 VRL 于 : 


主 窗口 ~ 


品 更 改 URL 后 选择 第 一 个 项 目 


图 7-16 “ 跳 较 菜单 ”对 话 框 


1]21 
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poemuyeavoer COD 守 光阴 牌 准 实 他 改 在 
(3) 设置 对 话 框 中 各 个 选项 ， 该 对 话 框 中 各 个 参数 功能 如 下 

> 上 用 于 设置 跳 转 菜单 的 条 目 。 用 户 可 以 使 用 二 |、 二 |、 二 |、 荆 按钮 对 

个 条 目 进 行 编辑 。 

ee 

“选择 时 ， 转 到 URL”: 用 于 设置 该 条 目 所 对 应 的 超 链 接 。 

“打开 URL 于 ”; 用 于 设置 打开 链接 的 位 置 。 
站 


(4) 单 二 < 确定” 按钮 ， 然 后 为 动作 选择 所 需 的 事件 。 
7.3.8 跳 转 某 半 开始 


如 果 在 插入 跳 转 菜单 时 ， 选 择 了 其 对 话 框 中 的 “ 沫 单 之 后 插入 前 往 按钮 ” 选项， 则 会 
在 跳 转 荣 单 后 面 添加 一 个 “前 往 ” 按 钮 ， 同 时 行为 面板 中 也 会 添加 其 对 应 的 动作 及 触发 事 
件 。“ 跳 转 采 单 开 始 ” 动 作用 于 设置 跳 转 采 单 的 “前 往 ” 按 钮 来 控制 不 同 的 跳 转 瑟 单 。 

“ 跳 转 染 单 开 始 ” 动 作 与 “ 跳 转 菜单 ”动作 密切 关联 。“ 跳 转 沫 单 开 始 ” 人 允许 将 一 个 

前往” 按钮 和 一 个 跳 转 菜单 关联 起 来 〈 在 使 用 此 动作 之 前 ， 文 档 中 必须 已 存在 一 个 跳 转 

玉音 )。 早 击 “前 往 ” 按 钮 打开 在 该 跳 转 亲 蛙 中 选择 的 链接 。 通 党 情况 下 ， 并 不 是 跳 转 采 
单 都 需要 一 个 “前 往 ” 按 钮 。 从 跳 转 染 单 中 选择 一 项 通 名 会 引起 URL 的 载 入 ， 不 需要 任 
何 进一步 的 用 户 操 作 。 但 是 如 果 访 问 者 选择 已 在 跳 转 菜单 中 选择 的 同一 项 , 则 不 发 生 跳 转 。 
通常 情况 下 这 不 会 有 多 大 关系 , 但 是 如 果 跳 转 末 单 出 现在 一 个 框架 中 ,而 跳 转 末 单 项 链接 
到 其 他 框架 中 的 页 ， 则 通常 需要 使 用 “前 往 ” 按 钮 ， 以 允许 访问 者 重新 选择 已 在 跳 转 荣 单 
中 选择 的 项 。 

使 用 “ 跳 转 这 单 开始 ”动作 的 步骤 如 下 : 

(1) 选择 一 个 跳 转 菜单 的 “前 往 ” 按 钮 ， 并 打开 “行为 ”面板 。 

(2) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 由 ， 并 从 行为 弹出 式 菜 单 中 执行 “中 
转 菜单 开始 ”命令 ， 弹 出 “ 跳 转 染 单 开始 ”对 话 框 ， 如 网 7-17 所 示 。 


AN 


选择 跳 转 荣 单 : | junpWenu 


根据 菜单 所 选择 的 索引 转 到 URL。 


图 7-17 “ 跳 较 菜单 开始 ”对 话 杠 


(3) 在 “选择 跳 转炉 时 ”弹出 式 末 单 中 ， 和 选择“ 前往” 按钮 要 激活 的 来 蛙 (一 服 是 
崇 反 “前往” 按钮 前 面 的 六 持 名 )。 
(4) 单 击 “ 确 定 ” 按 钮 。 


7.3.9 打开 浏览 器 窗口 


使 用 “打开 浏览 规 窗 口 ”动作 在 打开 当前 网 页 的 同时 ， 还 可 以 再 打开 一 个 新 的 窗口 。 
同时 ， 还 可 以 编辑 浏览 窗口 的 大 小 、 名 称 、 状 态 和 位 、 荣 单 栏 等 属性 。 
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使 用 “打开 浏览 如 窗 口 ” 动 作 的 步 又 如 下 : 

(1) 选择 一 个 对 象 并 打开 “行为 ”面板 。 

(2) 单 击 “ 行 为 ”面板 上 的 “ 诬 加 行为 ”按钮 直 ， 并 从 动作 弹出 陈 菜 单 中 执行 “ 打 
开 浏 贤 需 窗口 ”命令 ， 弹 出 “打开 浏览 喜 窗 口 ” 对 话 框 ， 如 图 7-18 所 示 。 


打开 浏览 器 窗口 
要 显示 的 wL | | 三 
窗口 宽度 : | ”| ”窗口 高 度 : | | 2 
属性 ， 口 导航 工具 栏 口 菜单 条 
口 地 址 工具 栏 口 。 需 要 时 使 用 滚动 条 
口 状态 栏 口 调整 大 小 手柄 
窗口 名 称 : | | 


图 7-18 “打开 浏览 厚 窗 口 ” 对 话 杠 


(3) 对 该 对 话 框 中 各 个 参数 进行 设置 ， 访 对话 框 中 各 个 参数 的 功能 如 下 : 

> “要 显示 的 URL”: 可 以 在 其 后 的 框 中 直接 输入 网 页 的 地 址 ， 也 可 以 通过 “ 浏 
览 ”按钮 打开 一 个 文件 选择 窗口 ， 从 中 选择 一 个 文件 。 
“窗口 宽度 ”: 用 于 设 羡 打开 的 浏览 带 窗 口 的 宽度 
“窗口 高 度 ”: 用 于 设置 打开 的 浏览 占 窗 口 的 高 度 
“属性 ”: 用 于 设置 打开 的 浏览 器 窗口 的 一 些 显 示 属 性 ， 它 有 6 个 选项 ， 可 以 选 
中 其 中 的 一 个 或 多 个 显示 特性 。 其 中 “导航 工具 栏 ? 选 项 表示 显示 导航 按钮 ; “ 羔 
单条 ”选项 表示 显示 菜单 条 ; “地 址 工具 栏 > 选项 表示 显示 地 址 栏 ， “需要 时 使 
用 滚动 条 ”选项 表示 根据 内 容 的 多 少 目 动 添加 滚动 条 ; “状态 栏 ”选项 表示 显示 
状态 条 ; “调整 大 小 手柄 ”选项 表示 显示 调整 玉 寸 的 手柄 。 

> “ “窗口 名 称 ”: 给 打开 的 浏览 右 窗 口 设置 一 个 名 学 。 

(4) 单 击 “确定 ”按钮 ， 之 后 为 动作 选择 所 需 的 事件 。 


7. 3.10 ”弹出 信息 


“弹出 信息 ”动作 显示 一 个 高 有 指定 消 恩 的 JavaScript 警告 。 因 为 JavaScript 警告 只 
有 一 个 “确定 ” 投 钮 ， 所 以 使 用 此 动作 可 以 提供 信息 ， 而 不 能 为 用 户 提 供 选 择 。 

使 用 “弹出 信息 ”动作 的 步骤 如 下 : 

(1) 选择 一 个 对 象 ， 并 打开 行为 面板 。 

(2) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 。， 并 从 动作 弹出 式 菜 单 中 执行 “ 弹 
出 信息 ”命令 ， 弹 出 “弹出 信息 ”对 话 框 ， 如 图 7-19 所 示 。 

(3) 在 “消息 ” 域 中 输入 需要 的 消息 。 

(4) 单 击 “人 确定 ”按钮 ， 之 后 为 动作 选择 所 需 的 事件 。 


图 7-19 “弹出 信息 ”对 话 框 
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“全 
i 望 对 消息 的 外 观 进 行 更 多 的 控制 ， 可 考虑 使 用 “打开 浏览 器 窗口 "行为 。 


:不 能 控制 JavaScript 警告 的 外 观 , 这 是 由 访问 者 的 浏览 器 决定 的 。 如 果 希 


7.3.11 预先 载 入 图 像 


经 党 在 网 上 浏览 的 用 户 ， 如 果 使 用 的 是 一 般 的 Modem 上 网 ， 感 受 最 深 的 当然 是 显示 
图 像 时 的 漫长 等 每 。 利 用 Dreamweaver CS6 目 禹 的 “预先 载 入 图 像 ” 动 作 ， 可 以 使 图 像 的 
下 载 时 间 明 显 加 快 。 因 为 它 已 经 将 不 立即 出 现在 页 面 上 的 图 像 〈 例 如 那些 将 通过 行为 或 
JavaScript 换 入 的 图 像 ) 载 入 浏览 器 缓存 中 ， 可 以 有 效 地 防止 当 图 像 该 出 现时 由 于 下 载 速 
度 导 致 的 延迟 。 这 样 可 以 大 大 提高 网 站 的 访问 量 。 
使 用 “预先 载 入 网 像 ” 动 作 的 步骤 如 下 : 
(1) 选择 一 个 对 象 ， 并 打开 “行为 ”面板 。 
(2) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 站 。， 并 从 动作 弹出 式 菜 单 中 执行 “ 预 
先 载 入 图 像 ” 命 令 ， 弹 出 “预先 载 入 图 像 ” 对 话 框 ， 如 图 7-20 所 示 。 


El 国 
观 先 载 入 图 
于 两- 


图 像 源 交 件 : [浏览 … ] 
图 7-20 “预先 载 入 图 像 ” 对 话 框 


(3) 单 击 “浏览 ”按钮 选择 要 预先 载 入 的 图 像 文件 ， 或 在 “图 像 源 文件 ”文本 框 中 
输入 图 像 的 路 径 和 文件 名 。 

(4) 单 击 对 话 框 顶 部 的 “添加 项 ”按钮 出 将 图 像 添 加 到 “预先 载 入 图 像 ” 列 表 中 。 

(5) 对 所 有 剩 下 的 要 预先 载 入 当前 页 的 图 像 重 复 第 3 步 和 第 4 步 。 

(6) 行 要 从 “预先 载 入 网 像 ” 列 表 中 删除 攻 个 岁 像 ， 请 在 列表 中 选择 该 图 像 ， 然 后 
单 击 “ 删 除 项 ”按钮 局。 

(7) 单 击 “ 确 定 ” 投 钮 ， 然 后 为 行为 选择 所 需 的 事件 。 


加 提示 ， 国 


如 果 在 输入 下 一 个 图 像 之 前 没有 单 击 加 号 按钮 ， 则 列表 中 上 次 选择 的 图 像 | 
将 被 “图 像 源 文件 ”文本 框 中 新 输入 的 图 像 蔡 换 。 

“交换 图 像 ”动作 自动 预先 载 入 在 “交换 图 像 ” 对 话 框 中 选择 “预先 载 入 图 像 ” 选 | 
项 时 所 有 高 亮 显 示 的 图 像 , 因此 当 使 用 “交换 图 像 ” 时 不 需要 手动 添加 要 预先 载 入 的 图 像 。 


7.3.12 设置 文本 

该 动作 可 以 设置 框架 、 层 、 状 态 栏 、 文 本 域 中 的 内 容 ， 在 用 适当 的 触发 事件 触发 后 显 
示 靳 的 内 容 。 它 有 4 个子 京 单 ， 分 别 对 应 看 4 种 切换 方式 。 

1. 设置 框架 文本 

“设置 框架 文本 ”行为 用 于 设置 框架 内 容 的 动态 变化 ， 当 适当 的 触发 事件 触发 后 在 某 
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一 个 框架 显示 新 的 内 容 ， 该 动作 将 蔡 换 框架 的 格式 设置 。 
使 用 “设置 框架 文本 ”动作 的 步骤 如 下 : 
(1) 选择 一 个 对 象 ， 并 打开 “行为 “面板 。 
(2) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 世 J， 并 从 动作 弹出 式 菜单 中 执行 “ 设 
置 文本 ”| “设置 框架 文本 ”命令 ， 弹 出 “设置 框架 文本 ”对 话 框 ， 如 图 7-21 所 示 。 


框架 : | 框架 “LeftFrame” v [一 一 
新 建 TITWL: | 下 


保留 背景 色 
图 7-21 “设置 框架 文本 ”对 话 框 


(3) 对 该 对 话 框 各 个 选项 进行 设置 ， 该 对 话 和 框 中 各 个 选项 的 功能 如 下 : 
> “框架 ”: 用 于 设置 内 容 进 行动 态 变 化 的 框 染 ,可 从 右边 下 拉 列 表 中 选择 一 个 框 


架 。 
> “ “新 建 HIML”: 用 于 设置 当前 框架 新 加 入 的 内 容 , 在 其 文本 框 中 可 输入 任何 的 第 
HTML 语句 以 及 JavaScript 代码 ， 这 些 内 容 将 代替 原来 该 框架 的 内 容 。 3 
> “获取 当前 HTML”: 单 击 该 按钮 ， 则 当前 框架 的 内 容 会 以 HTML 代码 的 形式 草 
显示 在 上 面 的 文本 框 中 。 三 
> “保留 背景 色 ”: 选中 该 复 选 框 , 则 保留 该 框架 以 前 设置 的 背景 闫 色 和 文本 闫 色 。 
(4) 单 击 “确定 ”按钮 ， 之 后 为 动作 选择 所 需 的 事件 。 


2. 设置 容 规 的 文本 

“设置 容 强 的 文本 ”行为 用 于 设置 页 面 上 的 现 有 容 占 (可 以 包含 文本 或 其 他 元 取 的 任 
何 元 聚 ) 的 内 容 和 格式 进行 动态 变化 ， 但 你 留 容 各 的 属性 包括 颜色 )。 妆 适当 的 触发 事 
件 触发 后 在 茶 一 个 窗口 中 显示 新 的 内 容 ， 访 内容 可 以 包括 任何 有 效 的 HTML 源 代 人 码 。。 

使 用 “设置 容 占 的 文本 ”动作 的 步 又 如 下 : 

(1) 选择 一 个 对 象 ， 并 打开 行为 面板 。 

(2) 单 击 “ 行 为 ”面板 上 的 “ 诬 加 行为 ”按钮 直 。， 并 从 动作 弹出 式 染 单 中 执行 “ 设 
半 文 本 ”|“ 设 置 容器 的 文本 ”命令 ， 弹 出 “设置 容 句 的 文本 ”对 话 框 ， 如 图 7-22 所 示 。 


容器 : div “apDivl” v| 
新 建 HTII: 取消 


图 7-22 “设置 容 右 的 文本 ”对 话 框 
(3) 对 该 对 话 框 各 个 选项 进行 设置 ， 该 对 话 框 中 各 个 参数 的 功能 如 下 : 
>  “ 容 句 ”: 用 于 设置 内 容 进行 动态 变化 的 容 凑 。 
> “ 狐 建 HTML”: 用 于 设置 当前 容 融 新 加 入 的 内 容 ,， 在 该 文本 框 中 可 输入 任何 有 
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myeamyar (XB 六 交 必 各 锥 突 创 发 具 
效 的 HTML 语句 、JavaScript 六 数 调用 、 属 性 、 全 局 变量 或 其 它 表达 式 ， 这 些 内 
容 将 代 蔡 原来 该 容 噩 中 的 内 容 。 在 要 航 入 一 个 JavaScript 表达 式 ， 其 将 其 放置 
在 大 括号 《〈{f}) 中 。 和 在 要 显示 大 括号 ， 其 在 它 前 面 加 一 个 反 笠 杠 〈\{) 。 
(4) 单 击 “人 确定 ”按钮 ， 之 后 为 动作 选择 所 需 的 事件 。 
3. 设置 状态 栏 文本 
“设置 状态 栏 文本 ”行为 用 于 设置 层 状态 栏 显示 的 信息 ， 当 用 适当 的 触发 事件 触发 后 
在 状态 位 中 显示 信息 。 设置 状 态 条 文本 动作 作用 与 弹出 信息 动作 的 作用 很 相似 , 不 同 的 是 
如 果 使 用 弹出 消 恩 动作 显示 文本 ,访问 者 必须 单 击 “确定 ”按钮 才 可 以 继续 浏览 网 页 中 的 
内 容 。 而 在 状态 栏 中 显示 的 文本 信息 不 会 影 啊 访 问 者 的 浏览 速度 ， 通 第 使 用 onMouseOver 
事件 和 这 个 动作 配合 。 在 一 般 的 默认 情况 下 ， 当 浏览 者 在 浏览 过 程 中 将 鼠标 移动 到 超级 链 
接 上 时 ,在 状态 栏 中 显示 的 是 链接 的 地 址 。 使 用 这 个 动作 可 以 改变 这 种 默认 设置 ,使 网 页 
更 加 丰富 多 彩 、 吸 引 更 多 的 访问 者 。 
使 用 “设置 状态 位 文本 ”动作 的 步 又 如 下 : 
(1) 选择 一 个 对 象 ， 并 打开 行为 面板 。 
(2) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 ie， 并 从 动作 弹出 式 肖 单 中 执行 “ 议 
置 文本 ”|“ 设 置 状 态 栏 文本 ”命令 ， 弹 出 “ 议 置 状态 栏 文本 ”对 话 框 ， 如 图 7-23 所 示 。 


图 7-23 “设置 状态 栏 文本 ”对 话 框 


(3) 将 需要 显示 的 信息 输入 到 “消息 ”文本 框 中 。 

(4) 单 击 “确定 ”按钮 ， 之 后 为 动作 选择 所 需 的 事件 。 

4， 设 置 文本 域 文字 

“设置 文本 域 文字 ”行为 用 于 设置 文本 域 的 内 容 进行 动态 变化 ， 在 用 适当 的 触发 事件 
触发 后 ， 在 某 一 个 文本 域 中 显示 新 的 内 容 。 使 用 本 行为 前 必须 先 插 入 文本 域 表 单 对 象 。 

使 用 “设置 文本 域 文字 ”动作 的 步骤 如 下 : 

(1) 选择 一 个 对 象 ， 并 打开 “行为 “面板 。 

(2) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ” 投 钮 as， 并 从 动作 弹出 式 荣 单 中 执行 “ 设 
置 文本 ”| “设置 文本 域 文字 ”命令 ， 弹 出 “设置 文本 域 文字 ”对 话 框 ， 如 图 7-24 所 示 。 


亿 本 域 : input "textfield” v 确定 
新 建立 本 : 取消 


图 7-24 “设置 文本 域 文字 ”对 话 框 


(3) 对 该 对 话 框 各 个 选项 进行 设置 ， 该 对 话 框 中 各 个 参数 的 功能 如 下 : 
> “文本 域 ”: 用 于 设置 内 容 进行 动态 变化 的 文本 域 ， 可 从 右边 的 下 拉 列 表 中 选择 
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一 个 文本 域 。 

> “ “新 建文 本 ”: 用 于 设置 当前 文本 域 狐 加 入 的 内 容 ， 在 该 文本 框 中 可 输入 任何 的 
HTML 语句 以 及 JavaScript 代码， 这 些 内 容 将 代 检 原来 该 文本 域 的 内 容 。 奎 航 入 
一 个 JavaScript 表达 式 ， 要 将 其 放置 在 大 括 写 〈({}) 中 。 

(4) 单 击 “确定 ”按钮 ， 之 后 为 动作 选择 所 需 的 事件 。 


7.3.13 显示 -隐藏 元 素 


“显示 - 隐 韦 元素 ”动作 用 于 显示 、 隐 纠 或 恢复 一 个 或 多 个 AP 元 双 的 默认 可 见 性 。 此 
动作 用 于 当 用 户 与 页 面 进行 交互 时 显示 信息 。 例 如 ， 当 用 户 将 鼠标 指针 请 过 一 个 人 物 的 图 
像 时 ， 可 以 显示 一 个 包 侣 有 该 人 物 的 姓 和 名、 性别、 年龄 和 星座 等 详细 信息 的 页 和 面 元 素 。 还 
可 用 于 创建 预先 载 入 页 面 元 素 ,， 即 一 个 最 初 挡住 页 内 容 的 较 大 页 面 元 素 ,， 在 所 有 页 组 件 都 
完成 载 入 后 该 页面 元 素 即 消失 。 

使 用 “显示 -隐藏 元 素 ” 动 作 的 步骤 如 下 : 

(1) 选择 一 个 对 象 ， 并 打开 行为 面板 。 

(2) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 直 ， 并 从 动作 弹出 式 菜单 中 执行 “ 显 
未- 隐 妃 元 素 ” 命 令 ， 弹 出 “显示 - 隐 蕊 元 素 ” 对 话 框 ， 如 图 7-25 所 示 。 


图 7-25 “显示 -隐藏 元 素 ” 对 话 框 


(3) 对 该 对 话 框 各 个 选项 进行 设置 ， 该 对 话 和 框 中 各 个 参数 的 功能 如 下 : 


> “ “元 素 ”: 在 列表 框 中 列 出 可 用 的 所 有 元 素 的 名 称 供 选择 。 

> “显示 ”: 单 击 此 按钮 ， 则 执行 动作 后 元 素 可 见 。 

> “隐藏 ”: 单 击 此 按钮 ， 则 执行 动作 后 元 素 不 可 见 。 

> “默认 ”: 单 击 此 按钮 ， 则 执行 动作 后 投 默 认 值 决定 元 素 是 个 可 见 ， 一 般 是 可 见 。 
(4) 单 击 “ 确 定 ” 按 钮 ， 之 后 为 动作 选择 所 需 的 事件 。 


7.3.14 交换 图 像 /恢复 交换 图 像 


“交换 图 像 /恢复 交换 图 像 ”动作 通过 更 改 simg> 标 签 的 src 属性 将 一 个 图 像 和 邦 一 个 
图 像 进 行 交换 。 使 用 此 动作 可 以 使 一 幅 图 像 产 生变 换 。“ 恢 复 交 换 图 像 ” 动 作 只 有 在 “ 交 
换 图 像 ”动作 之 后 使 用 才 有 效 ， 前 者 很 简单 ， 在 此 只 介绍 后 者 的 使 用 方法 。 

使 用 “交换 图 像 ” 动 作 的 步 又 如 下 : 

(1) 选择 一 个 对 象 ， 并 打开 行为 面板 。 

(2) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 起 ， 并 从 动作 弹出 式 菜 单 中 执行 “区 
换 图 像 ” 命 仿 ， 弹 出 “交换 图 像 ” 对 话 框 如 图 7-26 所 示 。 
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站 刀 / 溉 


a 


设 定 原始 档 为 : 
预先 载 六 图 像 


oneness ln 


图 7-26 “交换 图 像 ” 对 话 框 


(3) 对 该 对 话 框 各 个 选项 进行 设置 ， 该 对 话 框 中 各 个 参数 的 功能 如 下 : 

> “图 像 ”: 在 该 列表 框 中 显示 出 当前 文档 窗口 中 所 有 的 图 像 名 ， 可 以 从 该 列表 中 
选择 一 幅 图 像 并 使 其 进行 图 像 变换 。 

> ““ 设 定 原始 档 为 ”: 设置 原来 图 像 的 替换 图 像 ， 可 直接 在 该 文本 框 中 输入 图 像 的 
文件 名 , 也 可 单 击 浏览 按钮 , 打开 图 像 文件 选择 窗口 , 浏览 并 选择 一 个 图 像 文件 。 

了 注意 

2 由 于 只 有 src 属性 受 此 动作 的 影响 , 所 以 应 该 换 入 一 个 与 原 图 像 尺 寸 (高 

Wai 

的 尺寸 。 

> “预先 载 入 图 像 ”: 变换 的 图 像 在 打开 网 页 时 装 入 到 计算 机 的 缓冲 区 中 。 

(4) 单 击 “ 确 定 ” 按 钮 ， 然 后 为 动作 选择 所 需 的 事件 。 


7.3.15 检查 表单 


“检查 表单 ”动作 检 答 指定 文本 域 的 内 容 以 确保 输入 了 正 硝 的 数据 基 型 。 使 用 onBlur 


事件 将 此 动作 附加 a 到 单个 文本 域 ， 在 十 写 表 和 蛙 时 对 表单 对 象 的 值 进 行 检 合 ; 或 使 用 
onSubmit 事件 将 其 附加 到 表单 ， 在 单 击 “ 硝 定 ” 投 钮 时 ， 同 时 对 多 个 文本 域 进行 检查 。 将 
此 动作 附加 到 表单 ， 防 止 表 单 提交 到 服务 规 后 任何 指定 的 文本 域 人 省 有 无 效 的 数据 。 
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使 用 “检查 表单 ”动作 的 步 又 如 下 : 
(1) 选择 一 个 文本 域 对 象 ， 并 打开 行为 面板 。 
(2) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 直 ， 并 从 动作 弹出 式 菜 单 中 执行 “ 检 


得 表单 ”命令 ， 弹 出 “检查 表单 ”对 话 框 如 网 7-27 所 示 。 


可 接受 : ”任何 东西 C 〇 数字 
〇 ”电子 邮件 地 址 ”， 〇 《数字 从 


图 7-27 “检查 表单 ”对 话 框 
(3) 对 该 对 话 框 各 个 选项 进行 设置 ， 该 对 话 框 中 各 个 参数 的 功能 如 下 : 


> “ 域 ”; 在 该 列表 框 中 列 出 可 用 的 所 有 域名 供 选 择 设置 。 

> “必需 的 ”: 选中 此 项 ， 则 表单 对 象 必 须 填 有 内 容 不 能 为 空 。 

> “任何 东西 ”: 选中 此 项 ， 则 该 表单 对 象 是 必需 的 ， 但 不 需要 包含 任何 特定 类 型 
的 数据 。 如 果 没 有 选择 “必需 的 ”选项 ， 则 该 选项 就 无 意义 了 ， 也 束 是 说 它 与 该 
域 上 未 附加 “检查 表单 ”动作 一 样 。 

> “数学 ”: 选中 此 项 ， 则 检 醋 该 域 是 否 只 包含 数学 。 

> “电子 邮件 地 址 ”: 选中 此 项 ， 则 检查 该 表单 对 象 内 是 否 包 含 一 个 @ 人 符号。 

> “ “数字 从 ”: 选中 此 项 ， 则 表单 对 象 内 只 能 输入 指定 范围 的 数字 。 

(4) 单 击 “ 确 定 ” 按 钮 ， 然 后 为 动作 选择 所 需 的 事件 。 

在 Dreamweaver CS6 中 , 利用 Adobe 预制 的 表单 验证 组 件 , 如 Spry 验证 文本 域 、Spry 

验证 复 选 枉 、Spry 验证 选择 等 构件 ， 新 手 也 可 轻松 快捷 地 检 和 奉 表 单 ， 构 建 AJAX 页 面 。 


7.4 动手 练 一 练 


1. 在 文档 中 插入 一 张 图 片 , 并 把 图 片 设 为 虚 链 接 , 为 图 卢比 定 调用 JavaScript 行为 。 
当 鼠 标 移 到 图 像 上 时 弹出 对 话 杠 提示“ 这 是 虚 链接 ”。 

2. ”新建 一 个 文件 ， 往 文档 添加 一 个 表单 ， 以 及 姓名 文本 域 、 密 码 文本 域 、 电 子 邮件 
文本 域 和 电话 文本 域 等 。 利 用 “ 检 奏 表单 ”行为 ， 对 各 表单 对 象 进 行 有 效 性 验证 。 要 求 姓 
名 、 密 人 码 非 空 ， 电 话 写 公 只 能 输入 数学 ， 电 子 邮 件 地 址 必须 为 有 效 地 址 ( 即 
XXX@XXX.XXX 格 式 )。 


1.5 思考 题 


1. 在 网 页 中 插入 一 张 图 片 后 ， 为 什么 不 能 使 用 “显示 -隐藏 元 素 ” 行 为 ? 
2. 行为 “ 跳 转 采 单 ” 和 “ 跳 转 玉音 开始 ”有 什么 区 别 ， 分 别 适用 于 什么 情况 ? 
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i 其 /小 
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i 


.本章 将 介绍 AP 元 素 与 框架 的 基本 知识 及 使 用 方法 。 内 容 包括 : AP 元 
素 及 嵌 套 AP 元 素 的 创建 、AP 元 素 的 属性 设置 、AP 元 素 的 管理 、AP 元 素 ， 
的 操作 、 实 现 AP 元 素 与 表格 之 间 的 相互 转化 以 及 显示 与 隐藏 AP 元 素 ; 框 | 
架 的 创建 、 框 架 的 基本 操作 、 框 架 和 框架 集 的 属性 设置 、 设 置 框架 背景 、 保 。 
存 框架 和 框架 集 文件 、 使 用 链接 控制 框架 的 内 容 及 框架 的 实际 应 用 等 。 


~ 一 一 一 一 ~ 一 ~ 一 一 人 ~ 一 一 一 一 一 一 ~ 一 一 一 


插入 AP 元 素 

设置 AP 元 素 的 属性 
框架 集 与 框架 的 创建 
设置 框架 背景 
保存 、 删 除 框架 


8.1 AP 元 素 的 概念 


AP 元 紊 是 Dreamweaver CS6 中 最 有 价值 的 对 和 象 之 一 。 所 谓 AP 元 素 , 就 是 绝对 定位 元 
条 ， 是 分 配 有 绝对 位 置 的 HTML 页 和 面 元 票 ， 它 由 层 膨 样式 表 发 展 而 来 ， 提 供 了 一 种 对 网 
页 对 象 进行 有 效 控 制 的 手段 。AP 元 素 可 以 包 仿 文本、 网 像 、 表 单 、 择 件 ， 甚 全 AP 元 素 内 
还 可 以 包含 其 他 AP 元 素 。 也 了 加 是 说 ， 在 HTML 文档 的 正文 部 分 可 以 放置 的 元 素 都 可 以 放 
入 AP 元 素 中 。 由 于 AP 元 素 可 以 放置 在 网 页 中 的 任何 位 置 ， 从 而 能 有 效 地 控制 网 页 中 的 对 
象 。AP 元 素 是 在 制作 网 页 时 经 常用 到 的 对 象 ， 元 素 的 定位 是 一 个 最 简单 也 是 大 多 数 人 都 尝 
握 的 搁 巧 。 用 表格 对 页 面 进行 排版 非 沿 方 便 ， 但 有 时 需要 在 文学 上 放 一 些 图 片 之 类 的 应 用 ， 
表格 束 不 能 胜任 了 ， 这 时 束 需 要 用 AP 元 素来 排版 。 在 Dreamweaver CS6 中 AP 元 素 还 可 以 
转换 成 表格 ， 这 也 是 很 方便 的 。 利 用 Dreamweaver 可 以 在 不 进行 任何 JavaScript 或 HTML 
编码 的 情况 下 放置 AP 元 系 和 制作 AP 元 么 动画 。 可 以 将 AP 元 素 前 后 放置 ， 隐 汗 菜 些 AP 
元 素 而 显示 其 他 AP 元 素 ， 以 及 在 屏幕 上 移动 AP 元 素 。 可 以 在 一 个 AP 元 素 中 放置 背景 医 
像 ， 然 后 在 该 AP 元 素 的 前 面 放 置 第 二 个 AP 元 系 ， 它 包含 市 有 透明 背景 的 文本 。 这 样 束 可 
以 制作 AP 元 素 渐 进 和 渐 出 的 动画 。Dreamweaver CS6 中 的 AP 元 素 有 如 下 优点 : 

(1) 能 够 定位 精确 。 插 入 一 个 AP 元 素 后 ， 可 以 很 方便 地 在 属性 设置 面板 中 定 出 它 
的 大 小 及 在 页 面 中 的 绝对 坐标 ， 并 且 AP 元 素 与 AP 元 么 之 间 的 定位 也 相当 精确 ， 儿 乎 可 
以 不 通过 属性 栏 ， 和 直接 用 眼 观 看 束 可 以 了 。 

(2) 插入 目 如 。 如 果 用 表格 实现 在 页 面 的 菜 处 插入 一 段 文 本 或 一 幅 图 片 ， 可 能 会 将 
表格 拆 分 得 乱七八糟 ， 最 后 还 可 能 因 定 位 不 好 ， 在 浏览 句 中 预览 还 不 尽 如 人 和音 。 如 采用 
AP 元 素 吏 方便 多 了 ， 随 便 国 一 个 AP 元 素 ， 可 以 插入 任何 网 页 对 象 ， 然 后 拖 到 安放 的 地 
方 ， 绝 对 精确 。 

(3) 加 速 浏览 。 在 网 页 制作 的 过 程 中 ， 为 了 完成 图 片 、 文 学 之 间 的 精确 定位 ， 往 往 
通过 将 表格 制 得 很 大 ,然后 拆 成 数 个 单元 格 或 将 表格 进行 钥 僚 ,在 各 个 单元 中 插入 图 片 或 
文学 来 实现 。 然 而 在 正 浏览 器 中 ， 一 个 表格 只 有 被 完全 下 载 完 后 ， 才 能 显示 其 内 容 ， 如 
条 这 个 表格 很 大 的 话 ， 往 往 让 浏览 者 等 上 半天 。 运 用 AP 元 素来 制作 的 网 页 ， 定 位 会 很 精 
确 ， 使 用 不 同 版 本 的 浏览 器 浏览 网 页 内 容 时 束 没 有 上 述 的 问题 。 

(4) 具有 可 车 加 性 。 表 格 是 不 能 着 加 的 ， 而 AP 元 系 可 以 营 加 ， 并 且 后 和 面 创建 的 AP 
元 取 会 复 蓄 和 完 创 建 的 AP 元 素 。 利 用 这 一 特性 ， 可 以 达到 各 种 微妙 的 效 末 ， 例 如 在 数 个 
AP 元 素 中 插入 不 同 的 图 片 ， 然 后 膨 起 来 。AP 元 素 中 还 可 以 插入 表格 ， 将 AP 元 素 和 表格 
综合 利用 起 来 ， 以 便 更 好 地 实现 图 文 混 排 。 


8.2 创建 AP 元 率 


8.2.1 AP 元 素 管理 面板 
通过 AP 元 素 管 理 面 板 可 以 管理 文档 中 的 所 有 AP 元素。 执行“ 窗口 ”| “AP 元 素 ” 
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命令 ， 可 以 显示 AP 元 素 管 理 耐 板 ， 如 图 8-1 所 示 。 


图 8-1 AP 元 素 管 理 面 板 


AP 元 素 显 示 为 按 Z 轴 顺 序 排列 的 名 称 列 表 。 和 大 创建 AP 元 素 时 使 用 AP 元 素 的 默认 
属性 ， 则 首先 创建 的 AP 元 素 出 现在 列表 的 底部 ， 最 新 创建 的 AP 元 素 出 现在 列表 的 顶部 。 
骸 套 的 AP 元 素 显 示 为 连接 到 父 AP 元 率 的 名 称 。 也 残 是 说 各 AP 元 素 之 间 耕 有 重 登 部 分 ， 
则 重 登 部 分 总 是 显示 位 于 列表 上 边 的 AP 元 素 的 内 容 。 

使 用 AP 元 素 管理 面板 可 以 防止 AP 元 素 和 草 阁 ,改变 AP 元 素 的 可 见 性 及 堆 有 登 顺 序 等 。 

(1) 防止 AP 元 率 重 登 。 防 止 AP 元 素 重 琶 的 操作 方法 如 下 : 执行 “窗口 ”| “AP 
元 素 ” 命 令 ， 调 出 AP 元 系 管 理 面 板 ， 选 择 “ 防 目 重 登 ” 复 选 框 即 可 防止 AP 元 素 重 登 。 
选中 该 项 后 ， 其 选择 框 内 会 出 现 一 个 “v”。 

(2) 改变 AP 元 素 的 可 见 性 。 改变 AP 元 素 的 可 见 性 的 操作 方法 如 下 : 执行 “窗口 ”| 

“AP 元 素 ”命令 , 调 出 AP 元 素 管 理 面 板 , 然后 选择 需要 改变 可 见 性 的 AP 元 素 所 在 的 行 ， 
单 击 眼睛 仿 图 标 列 ， 设 置 为 需要 的 可 见 性 。 其 中 睁 开 的 眼睛 表示 AP 元 素 可 见 ， 闭 上 的 眼 
睛 表示 不 可 见 ， 没 有 眼睛 表示 继承 其 父 AP 元 素 的 可 见 性 ， 如 果 没 有 父 AP 元 素 ， 则 继承 
文档 主体 的 可 见 性 ， 它 总 是 可 见 的 。 

(3) 改变 AP 元 素 的 堆 闭 顺序。 改变 AP 元 系 的 扒 登 顺序 的 操作 方法 如 下 : 执行 “ 
口 ”| “AP 元素” 命令， 调 出 AP 元 素 管理 面板 ， 然 后 选择 需要 改变 堆 千 顺序 的 AP 元 素 
所 在 的 行 ， 单 击 Z 列 ,输入 需要 的 堆 著 顺序 写 。 如 果 输 入 一 个 较 大 的 数学 ， 则 AP 元 系 在 
堆 登 顺序 中 往 前 移动 ; 输入 较 小 的 数字 ， 则 AP 元 系 在 堆 登 顺序 中 往 后 移动 。 


8.2.2 创建 新 的 AP 元 素 


(1) 执行 “窗口 ”|“ 插 入” 命令， 打开 “插入 ”面板 ， 
单 击 “插入 ”面板 上 的 “布局 ”标签 ， 切 换 到 “布局 ”和 面板 。 

(2) 单 击 “布局 ”面板 中 的 “绘制 AP Div” 按 钮 旱 ， 此 
时 鼠标 显示 为 十 形 。 

(3) 在 文档 窗口 中 需要 搬入 AP 元 素 的 位 置 单 击 ， 或 用 
民 标 拖 出 一 个 窍 形 AP 元 素 ， 插 入 AP 元 素 后 的 效果 如 图 8-2 
所 示 。 


图 8-2 ”显示 AP 元 素 
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此 外 , 也 可 以 将 光标 放置 在 文档 窗口 中 需要 插入 AP 元 系 的 位 置 , 然后 执行 “插入 ”| 
“布局 对 象 ”| “AP 元 素 ” 命 令 ， 捅 入 一 个 默认 大 小 的 AP 元 素 。 


提示 : 如果 需要 画 多 个 AP 元 素 ， 在 单 击 插入 面板 上 会 “绘制 tp Div” 的 图 标 后 ， 
按 住 Ctrl 键 ， 在 文档 窗口 中 画 出 一 个 AP 元 素 。 只 要 不 释放 Ctrl 键 ， 就 可 以 连续 画 多 个 


8. 2.3 ”创建 散 套 AP 元 素 


骸 套 AP 元 素 就 是 在 一 个 AP 元 素 中 的 AP 元 素 。 髓 人 套 的 AP 元 素 随 看 父 AP 元 系 移 动 
并 且 继 承 父 AP 元 素 的 可 见 性 。 
下 和 而 介绍 在 文档 中 创建 饮 套 AP 元 素 的 其 体 步 又 : 

(1) 单 击 “ 插 入 ” 栏 “ 布 局 ”面板 “绘制 APDiv” 按 钮 于， 在 文档 设计 视图 中 插入 
下 A 元 条 。 

(2) 在 没有 选中 “AP 元 系 ” 和 面板 中 的 “防止 草 奢 ” 复 选 框 的 前 提 下 ， 把 光标 定位 a 到 
已 创建 的 AP 元 素 内 。 

(3) 单 击 “ 插 入 ” 栏 “ 布 局 ”面板 中 的 “绘制 AP Div” 图 标 墅 ， 用 插入 AP 元 素 的 
方法 创建 新 的 AP 元 素 。 先 创建 的 一 个 AP 元 素 成 为 父 AP 元 素 , 后 创建 的 AP 元 素 成 为 子 
XP 

如 条 已 在 “首选 参数 ”对 话 框 中 将 AP 元 素 的 骸 僚 功能 禁用 ， 则 绘制 子 AP 元 系 时 需 
要 按 下 键 往 上 的 Alt 键 。 

插入 髓 套 AP 元 素 后 的 效果 如 图 8-3 所 示 。 在 AP 元 素 管理 面板 中 可 以 看 出 apDiv3 是 
apDiv2 的 子 AP 元 素 ， 如 网 8-4 所 示 。 


图 8-3 直接 创建 谍 套 AP 元 又 


提示 : :如果 在 AP 元 素 参 数 选择 中 启用 了 嵌 套 ， 当 从 另 一 个 AP 元 素 内 开始 绘制 AP 
元 素 时 将 实现 AP 元 素 的 自动 谋 套 。 操 作 如 下 : “编辑 ”| “首选 参数 "， 显 示 “首选 参数 ， 


对 话 框 。 在 左 侧 的 “类 别 ” 列 表 中 选择 “AP 元 素 "， 选 中 “如 果 在 AP 元 素 中 则 使 用 澡 大 ”。| 


8.2.4 AP 元 素 的 属性 设置 


在 设计 视图 中 选择 一 个 AP 元 素 ， 显 示 的 AP 元 素 属 性 和 面板 如 图 8-5 所 示 。 面 板 中 各 
个 属性 的 作用 如 下 : 
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图 8-5 AP 元 系 属 性 设置 面板 


(1) “CSS-P 元 素 ”: 用 于 设置 AP 元 素 的 名 宇 ， 名 字 只 能 使 用 英文 字母 及 数字 ， 
且 只 能 使 用 字母 开头 。 

(2)“ 左 ”: 在 该 文本 框 中 指定 AP 元 素 的 左边 框 相对 于 页 面 或 父 AP 元 素 左 边框 的 
位 置 。 可 以 在 文本 框 中 直接 输入 具体 的 数值 ， 使 用 的 计量 单位 为 px〈 像 素 ) 、pt (点 ) 、 
pc“《〈 十 二 点 活字 ) 、i 《英寸 ) 、mm 〈 坚 米 ) 、cm (厘米 ) 或 % 在 父 对 象 中 所 占 的 白 
分 比 ) 等 。 系 统 默认 的 计量 单位 为 像素 。 

(3) “上 ”: 在 该 文本 框 中 指定 AP 元 素 顶 部 边框 与 页 面 或 父 AP 元 素 的 距离 ， 可 以 
在 文本 框 中 直接 输入 有 具体 的 数值 。 计 量 单位 同 “ 左 ”。 

(4) “ 宽 ” 和 “高 ”: 在 这 两 个 文本 框 中 指定 AP 元 素 的 宽度 和 高 度 。 如 有 果 AP 元 素 
的 内 容 超 过 指定 大 小 ，AP 元 素 的 底 边缘 会 延伸 以 容纳 这 些 内 容 。 当 AP 元 素 在 浏览 器 中 
出 现时 ， 如 果 AP 元 素 的 “ 游 出 ”属性 没有 设置 为 “visibleg”， 那 么 底 边 缘 将 不 会 延伸 ， 
超出 的 那 部 分 内 容 将 上 自动 被 屋 切 挥 。 计 量 单 位 同 “ 左 ”。 

(5) “Z 轴 ”: 在 该 文本 框 中 指定 AP 元 素 的 Z- 编 号 (或 堆 闭 顺序 号 ) 。Z 轴 编 号 
较 大 的 AP 元 素 出 现在 编写 较 小 的 AP 元 素 的 上 面 。 编号 可 以 为 正 数 或 负数 ， 也 可 以 是 0。 
如 果 AP 元 素 不 重 骆 ， 则 该 值 没 有 实际 用 途 。 可 以 在 AP 元 素 管理 面板 中 修改 AP 元 素 的 
序列 值 。 

(6) “可 见 性 ”: 该 下 拉 列 表 框 用 于 控制 AP 元 素 的 初始 显示 状态 。 可 使 用 脚本 语 
言 (如 JavaScript) 控制 AP 元 系 的 可 见 性 和 动态 显示 AP 元 素 的 内 容 。 

该 属性 有 4 个 选项 ， 其 中 “Default” 表 示 不 指定 AP 元 素 的 可 见 性 属性 ， 但 多 数 浏 览 
器 把 该 项 默认 为 “Inherit”( 继 承 );“Inherit” 表 示 继 承 父 AP 元 素 的 可 见 性 属性 ;“Visible” 
表示 显示 AP 元 素 的 内 容 , 忽略 父 AP 元 素 是 否 可 见 ;“Hidden” 表 示 隐 AP 元 素 的 内 容 ， 
忽略 父 AP 元 素 是 否 可 见 。 

(7) “背景 图 像 ”: 用 于 设置 AP 元 素 的 背景 图 像 。 

(8) “背景 闫 色 ”: 用 于 设置 AP 元 素 的 背景 颜色 。 

(9) “类 ”:; 用 于 设置 AP 元 系 中 的 内 容 所 使 用 的 CSS 样式 。 

(10) “ 洲 出 ”: 用 于 设置 AP 元 素 内 容 超 过 了 元 素 大 小 将 以 何 种 方式 显示 。 该 选项 
仅 适 用 于 CSS AP 元 素 。 

该 属性 共有 4 个 选项 : 其 中 “Visible” 表 示 增 加 AP 元 素 的 大 小 ，AP 元 素 癌 下 或 回 右 
扩大 ， 以 便 AP 元 素 的 所 有 内 容 都 可 见 ;“Hidden” 表 示 保 持 AP 元 素 的 大 小 ， 剪 切 掉 超 出 
AP 元 素 范 围 的 任何 内 容 ， 不 显示 滚动 条 ;“Scroll” 表 示 给 AP 元 素 添加 滚动 条 ， 不 管内 
容 是 人 否 超过 了 AP 元 素 的 大 小 ,特别 是 通过 提供 滚动 条 来 避免 在 动态 环境 中 显示 和 不 显示 
滚动 条 导致 的 混乱 ;“Auto” 表 示 在 AP 元 素 的 内 容 超 过 边界 时 目 动 显示 滩 动 条 。 

(11) “剪辑 ”: 用 于 设置 AP 元 素 的 可 见 区 域 ， 指 定 左 侧 、 顶 部 、 右 侧 和 底 边 坐标 
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可 在 AP 元 么 的 坐标 空间 中 定义 一 个 矩形 (从 AP 元 系 的 左上 角 开 始 计 算 ) 。AP 元 系 经 过 
“ 檀 辑 ”后 ， 只 有 指定 的 窍 形 区 域 才 是 可 见 的。 这 些 值 都 是 相对 于 AP 元 素 本 身 ， 不 是 相 
对 于 文档 窗口 或 其 他 对 象 的 。 


8.3 AP 元 素 的 操作 


创建 复杂 的 页 面 布 局 ， 可 以 使 用 AP 元 素来 布局 页 面 。 要 能 正确 运用 AP 元 素来 设计 
网 页 ， 必 须 了 解 AP 元 素 的 一 些 基 本 操作 。AP 元 素 被 插入 到 文档 窗口 后 ， 可 以 进行 选择 、 
移动 、 调 整 大 小 、 骨 套 及 删除 等 操作 。 
8. 3.1 激活 AP 元 素 

如 果 和 需要 在 AP 元 素 中 插入 对 象 ， 必 须 激 活 AP 元 素 。 将 鼠标 在 AP 元 素 内 的 任何 地 
方 单 击 ， 即 可 激活 AP 元 素 。 此 时 ， 插 入 点 位 于 AP 元 素 内 。 被 激活 的 AP 元 素 的 边界 突 
出 显示 ， 选 择 手 柄 也 也 同时 显示 出 来 。 


_ 


8.3.2 选 定 AP 元素 


要 对 AP 元 素 进 行 移动 、 调 整 大 小 每 操作 ， 必 须 先 选择 AP 元 系 。 可 以 选择 一 个 AP 
元 素 或 选择 多 个 AP 元 素 ， 它 们 的 操作 不 尽 相 同 。 

(1) 选择 一 个 AP 元 素 可 使 用 如 下 方法 之 一 : 

在 “AP 元 素 ” 面 板 中 单 击 该 AP 元 素 的 名 称 。 

单 击 一 个 AP 元 素 的 选择 柄 只。 如 果 选 择 柄 不 可 见 ， 在 该 AP 元 素 中 的 任意 位 置 单 击 
后 显示 该 选项 柄 。 

单 击 一 个 AP 元 素 的 边框 。 

单 击 AP 元 素 代码 标记 【在 设计 视图 中 ) ， 它 表示 AP 元 素 在 HTML 代码 中 的 位 置 。 
如 果 AP 元 系 代 但 标记 不 可 见 ， 执 行 “ 得 看 ” | “可 视 化 助理 ”| “不 可 见 元 素 ” 命 令 。 

(2) 选择 多 个 AP 元 素 。 有 时 需要 对 多 个 AP 元 素 进 行 操作 ， 比 如 使 多 个 AP 元 素 顶 
部 对 章 ， 或 使 它们 的 宽度 向 上 度 相同 ， 束 第 要 选择 多 个 AP 元 素 ， 再 议 置 其 相应 的 属性 。 
要 选择 多 个 AP 元 素 ， 可 执行 以 下 操作 之 一 : 

先 在 文档 窗口 中 选择 一 个 AP 元 素 , 然后 按 住 Shift 键 ， 再 用 鼠标 单 击 其 他 AP 元 素 的 
边框 ， 则 可 以 同时 选择 多 个 AP 元 素 。 

执行 “窗口 ”| “AP 元 素 ” 命 令 ， 调 出 AP 元 素 管理 面板 ， 先 用 鼠标 选择 一 个 AP 
元 素 的 名 字 ， 然 后 按 住 Shift 键 ， 再 用 鼠标 单 击 其 他 AP 元 素 的 名 字 ， 也 可 以 同时 选择 多 
AP IC 


8. 3. 3 调整 AP 元 素 的 大 小 


在 文档 窗口 中 插入 一 个 AP 元 聚 后 ， 接 看 的 操作 过 程 中 帅 利 会 根据 需要 对 AP 元 素 的 
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大 小 作 适 当 调整 。 可 以 调整 单个 AP 元 素 的 大 小 , 也 可 以 同时 调整 多 个 AP 元 素 的 大 小 以 
使 其 具有 相同 的 宽度 和 高 度 

1. 调整 单个 AP 元 素 的 大 小 

要 调整 单个 AP 元 素 的 大 小 ， 可 执行 以 下 操作 之 一 : 

(1) 先 选 择 需 要 调整 大 小 的 AP 元 素 , 然后 将 光标 移动 到 AP 元 素 边 框 上 的 小 黑 方 块 
可 当 光 标 变 为 垂直 双 癌 箭头 时 ， 按 住 鼠 标 左 键 向 上 或 向 下 拖拉 鼠标 ， 则 可 以 调整 AP 元 
率 的 高 度 ， 当 光标 变 为 水 平 双 辐 箭头 时 ， 按 住 鼠 标 左 键 癌 左 或 癌 右 拖拉 光标 ， 则 可 以 调整 
AP 元 素 的 寅 度 ， 当 光标 变 为 斜 向 双 箭 头 时 ， 按 住 鼠 标 左 键 斜 向 上 或 斜 向 下 拖拉 光标 ， 风 
可 以 调整 AP 元 素 的 高 度 及 宽度 。 

(2) 在 设计 视图 选中 AP 元 素 ， 出现 属 性 设置 面板 ， 在 AP 元 素 属 性 设置 面板 中 直接 
设置 属性 宽 和 高 的 具体 数值 。 


/ i 
扩展 的 方向 上 按 下 键盘 上 的 箭头 键 和 Ctrl 键 就 可 以 完成 。 


2， 同时 调整 多 个 AP 元 又 的 大 小 

(1) 在 设计 视图 中 选择 两 个 或 更 多 个 AP 元 素 。 

(2) 执行 “修改 ”| “排列 顺序 ”| “该 成 宽度 相同 ”或 “修改 ”| ”排列 顺序 ”| 
“ 设 成 高 度 相 同 ” 合 命令 ， 设 成 宽度 或 品 度 相同 ， 先 选 定 的 AP 元 素 将 调整 为 最 后 一 个 选 
定 AP 元 素 〈 黑 色 突 出 显示 ) 的 宽度 或 高 度 。 也 可 以 在 属性 面板 中 输入 宽度 和 高 度 值 ， 
这 些 值 将 应 用 于 所 有 选 定 的 AP 元 素 。 


8.3.4 AP 元 素 的 移动 与 对 齐 


在 文档 窗口 中 要 移动 一 个 AP 元 系 ， 可 执行 以 下 操作 之 一 : 

(1) 先 选择 一 个 AP 元 素 , 然后 在 该 AP 元 素 的 选择 手柄 世上 按 下 鼠标 左 键 拖 动 光 标 ， 
则 可 移动 AP 元 素 。 也 可 以 选中 AP 元 又 后 按键 盘 上 的 方 同 键 来 一 个 一 个 像素 地 移动 AP 
二 

(2) 将 光标 移动 到 需要 移动 AP 元 素 的 边 杠 位置， 光标 形状 变 为 4 问 季 头 时 ， 按 住 
忌 标 左 键 并 拖 动 光 标 ， 则 可 以 移动 AP 元 素 。 

(3) 在 设计 视图 选中 要 移动 的 AP 元 素 , 在 AP 元 素 属性 设置 面板 中 直接 设置 “ 左 ”、 
“上 ”的 数值 。 

当 文 档 窗口 中 有 多 个 AP 元 素 时 ， 可 以 使 用 对 齐 命令 使 多 个 AP 元 到 对 齐 。 操 作 方 法 
是 : 先 在 文档 窗口 中 选择 需要 对 章 的 AP 元 素 。 然 后 执行 “修改 ”| “ 排列 顺序 ” 子 采 
单 下 的 “无 对 齐 和 “ 右 对 齐 ”“ 对 齐 上 缘 ” 或 “对 齐 下 缘 ” 命 令 。 

例如 ， 图 8-6 中 的 AP 元 么 在 执行 项 对 齐 命 令 后 的 效果 如 图 8-7 所 示 。 
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汪 提 责 :如果 同时 选择 多 个 AP 元 素 ， 在 任 一 个 被 选择 的 AP 元 素 的 手柄 上 按 住 鼠 标 
左 键 并 拖拉 光标 移动 该 AP 元 素 ， 则 其 他 被 选择 的 AP 元 素 也 跟着 移动 


和 | 


8.3.5 改变 ApP 元 素 的 堆 又 顺序 


下 面 以 一 个 网 片 堆 倒 效果 示例 介绍 改变 AP 元 又 堆 车 顺序 的 其 体操 作 。 本 例 最 终 效 果 如 
图 8-8 所 示 。 四 

01 新 建 一 个 文档 ， 单 击 “ 插 入 ” 栏 “布局 ”面板 中 的 “绘制 AP Div” 图 标明 ， 在 
文档 设计 视图 中 插入 一 个 AP 元 系 。 

02 9 光标 定位 在 AP 元 素 内 ， 单 击 “ 插 入 ” 栏 “ 常 用 ”面板 中 的 插入 图 像 的 图 标 回 ， 
在 AP 元 素 里 插入 一 张 图 像 。 

0 沁 在 “AP 元素” 面板 中 取消 选中 “防止 重 登 ” 复 选 框 ， 按 照 前 两 步 的 方法 再 建 两 
个 AP 元 素 ， 以 及 在 AP 元 素 中 插入 图 像 。 此 时 的 页 面 效 果 如 图 8-9 所 示 。 


TRY er 
1 于， 更 
wa es 


人 
Er 


， 是 
到 本 rT ty be 
iT ET 
a Soc 了 EC Ww 
We A a We LT | 
Pe We 外 < “5 
到 7 全 所 | 站 
DY pr S 4 PT 
EAI 让 7 和 
eA ~ 放 
“ " 村 
R AT 
;I "| ~ 


8-8 ”示例 效果 8-9 ”效果 
04 选中 AP 元 素 apDiv1， 设 置 AP 元 素 的 堆 车 顺序 。 打 开 AP 元 素 管 理 面板 ， 选 中 


需要 调整 堆 登 顺序 的 AP 元 素 apDiv2， 按 下 鼠标 无 键 ， 上 下 拖 动 apDiv2 使 之 处 于 apDiv3 

的 上 耐 ， 然 后 释放 鼠标 左 键 。 也 可 蛙 击 Z 索引 区 后 修改 Z 从 为 3 (2Z 值 越 大 ， 越 处 于 AP 
元 素面 板 的 上 部 )。 

为 一 种 方法 是 选中 需要 调整 堆肥 顺序 的 AP 元 素 apDiv3, 然后 修改 Z-Index 的 值 为 3。 
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peemoyoeemvar (XB 定妆 维修 淮 实 创 玲 青 
05 以 同样 的 方法 设置 apDivl 和 apDiv2 的 堆 秋 顺序。 设置 后 的 AP 元 素 管理 面板 
如 图 8-10 所 示 。 


LEss 样 3 hf 元 来 | 标签 检 |“ 三 
IM 防止 重 梧 
| ID | 之 
apDiv2 
apDiv3 


apDiv1 


图 8-10 AP 元 素 的 扒 登 顺序 


06 完成 以 上 步骤 ， 按 F12 键 预览 网 页 得 到 图 8-8 的 效果 。 
8.4 AP 元 素 与 表格 的 相互 转换 


由 于 早期 的 一 些 浏览 占 不 文 持 AP 元 系 ， 所 以 使 用 AP 元 对 建立 的 网 页 需要 转换 成 表 
格 的 形式 ; 同样 ， 一 些 使 用 表格 布局 的 足 面 如 果 布 户 利 用 AP 元 素 的 灵活 性 ， 也 需要 把 表 
格 转换 成 AP 元 素 。 


8.4.1 将 AP 元素 转 换 成 表格 


使 用 AP 元 素 能 够 更 方便 、 精 确 地 将 页 面 的 内 容 定 位 ， 还 可 以 迅速 地 进行 复 歼 的 页 面 
设计 。 上 所 以 可 以 先 使 用 AP 元 素 创 建 复 森 的 页 面 布局 ， 然 后 再 把 AP 元 素 布 局 转换 成 表格 
布局 供 不 支 持 AP 元 素 的 浏览 器 浏览 。 在 Dreamweaver CS6 中 ,执行 “修改 ”| “转换 ”| 
“将 AP Div 转换 为 表格 ”命令 即 可 将 AP 元 素 转 换 成 表格 。 弹 出 的 “将 AP Div 转换 为 表 
格 ” 对 话 框 如 图 8-11 所 示 。 


将 ap Diw 转换 为 表格 


表格 布局 : 〇 ) 最 精确 出 ) 
他 最小: 合并 空白 单元 (8) 
小 于 : |4 ”| 你 素 宽 度 
区 | 使 用 透明 GIFs (7) 


问 置 于 页 面 中 央 人 ) 


布局 工具 : [加 防止 重要 (F) 
口 显示 BP 元 素面 板 (A) 
品 显 示 网 格 (6) 
器] 靠 齐 到 网 格 凶 ) 


图 8-11 “将 AP 元 系 转 换 为 表格 ”对 话 杠 


对 话 框 中 各 参数 的 功能 如 下 : 

“最 精确 ”: 如 果 选 择 该 项 ， 则 为 每 一 个 AP 元 素 建立 一 个 表格 单元 ， 同 时 AP 元 素 
之 间 的 空隙 也 建立 相应 的 单元 格 。 

“最 小 : 合并 空 单 元 ”: 如 果 选 择 该 项 ， 当 AP 元 素 之 间 的 距离 小 于 设 定 值 时 ， 则 
这 些 空 : 阶 不 生成 独立 的 单元 格 ， 它们 被 合并 到 较 近 的 AP 元 素 生 成 的 单元 格 中 。 最 小 值 可 
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以 改变 ， 系 统 默认 最 小 值 为 4 个 像素 。 选 择 该 项 生成 表格 的 空 行 、 空 列 最 少 。 
“使 用 透明 GIFs”: 如 果 选 择 该 项 ， 则 生成 表格 的 最 后 一 行 用 透明 的 GIF 文件 格式 
填充 ， 这 样 在 不 同 的 浏览 喜 中 可 以 确保 表格 以 相同 的 列 宽 显 示 。 
“ 置 于 页 面 中 央 ”: 如 果 选 择 该 项 ， 生 成 的 表格 将 在 文档 窗口 中 居中 放置 。 
“ 防 正 重 刁 ”: 如 果 选 择 该 项 ， 可 以 防止 AP 元 又 竺 车 。 
“显示 AP 元 素面 板 ”: 如 果 选 择 该 项 ， 转 换 后 显示 AP 元 对 管 理 面 板 。 
“显示 网 格 ”: 如 果 选 择 该 项 ， 转 换 后 显示 网 格 。 
“ 靠 齐 到 网 格 ”: 如 果 选 择 该 项 ， 局 用 吸附 到 网 格 功能 。 
ys 注意 : 
2 在 模板 文档 或 已 应 用 模板 的 文档 中 ， 不 能 将 AP 元 素 转 换 为 表格 或 将 表格 
转换 为 AP 元 素 。 所 以 ， 应 该 在 非 模板 文档 中 创建 布局 ， 然 后 在 将 该 文档 另存 为 模板 
之 前 进行 转换 。 


8.4.2 表格 转换 成 AP 元 素 


当 对 页 面 布 局 不 满意 必须 进行 调整 时 ， 如 采 是 使 用 表格 布局 的 页 面 ， 调 整 没 有 使 用 
AP 元 聚 布局 的 负面 灵活 ， 这 时 可 以 把 表格 布局 的 负面 转换 为 AP 元 系 布 局 的 外 而 ， 再 进 
行 调 整 。 

在 文档 窗口 中 ， 选 择 需要 转换 的 表格 ， 执 行 “ 修 改 ”| “转换 ”| “将 表格 转换 为 
AP Div” 命 令 ， 出 现 “ 将 表格 转换 为 AP Div” 对 话 框 ， 如 图 8-12 所 示 。 该 对 话 框 中 各 选 


项 的 功能 如 下 : 
“显示 网 格 ” 使 网 格 在 “设计 ” 视图 中 可 见 。 将 表格 转换 为 &P Diw 
“ 靠 齐 到 网 格 ” 使 页 面 元 素 靠 齐 到 网 格 线 。 ER 
“防止 重 二 六 在 创建 、 移 动 AP 元 素 和 调整 呵 显示 网 格 (G) 
AP 元 素 大 小 时 会 约束 AP 元 素 的 位 置 ， 使 AP 元 EE 
素 不 会 重 盔 。 


“显示 AP 元 素面 板 ”: 显示 “AP 元 素 ” 面 板 。 图 8-12 “将 表格 转换 为 AP Div” 对 话 框 
使 用 “将 表格 转换 为 APDiv” 命 令 转换 表格 时 ， 位 于 表格 外 的 页 面 元 素 也 会 放 入 AP 
元 系 中 。 表 格 中 的 空 单 元 格 不 会 转换 为 AP 元 系 ， 除 非 它 们 上 其 有 背景 闫 色 。 


8.5 显示 与 隐藏 AP 元 素 


上 网 时 第 遇 到 这 样 的 网 页 : 页 面 上 只 显示 一 张 图 片 ， 当 光标 移动 到 图 片上 时 ， 束 会 显 
不 一 个 隐藏 的 AP 元 素 ， 而 光标 从 图 片上 移 开 时 ，AP 元 素 义 被 隐藏 起 来 。 这 是 比较 常用 
的 处 理 技 巧 ， 会 非常 市 约 版 面 宇 间 。 例 如 : 当 光 标 移动 到 图 8-13 所 示 图 片上 时 ， 隐 和 叫 的 
AP 元 素 显 示 ， 如 图 8-14 所 示 。 光 标 离 开 图 厂 时 AP 元 素 内 容 隐 茂 。 
实现 此 例 的 操作 步骤 如 下 : 
01 启动 Dreamweaver CS6， 痢 建 一 个 HTML 文档 ， 并 设置 其 背景 图 像 。 新 建 一 个 
CSS 规则 ， 设 置 选 择 右 类 型 为 “类 ” 选择 右 名 称 为 “.bgstyle”。 早 击 “ 人 确定” 按钮 打开 
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规则 定义 对 话 框 ， 选择 “背景 "分 类 | i ey 的 a re 至 景 
位 置 (Y) 为 “bottom”。 单 击 “ 人 确定 ”按钮 关闭 对 话 框 。 在 “文档 ”窗口 选中 <body> 标 
签 ， 单 击 鼠 标 右键 ， 在 弹出 的 下 拉 菜 单 中 选择 “设置 类 ”|“bgstyle”。 


软 Dreamweaver L90 


图 8-13 ”实例 图 厂 


Dreamweaver CSOb 
DTY 教程 


前 言 


和 应 用 5 飞 狂 进 ， 3 很 网 
本: 机 构 肪 至 个 


车 标 移 到 图 片上 


近年 来 ， 信 乱 
全 球 信息 共享 成 为 
页 或 网 站 ， 网 络 绢 六 过 : 
很 清楚 地 将 网 站 的 内 容 
独树一帜 的 网 站 就 成 

A 可 要 介 经 
司 推出 的 梦幻 组 sofn eek EE 
了 网 页 制作 与 站 点 管理 【DreatmwEBwer) 、 EFlash》 及 网 页 图 像 
处 理 【Firewrotrks) ， pr 


图 8-14 显示 效果 


02 在 文档 窗口 中 插入 一 个 一 行 二 列 的 表格 ， 表 格 宽度 为 600 像素 ， 并 在 属性 面板 
中 设置 “对 齐 ” 方 式 为 “居中 对 齐 ” 然后 设置 单元 格 内 容 水 平和 垂直 对 齐 方式 均 为 居中 ， 
在 第 一 行 第 一 列 的 单元 格 中 插入 图 片 。 

03 在 第 二 列 单元 格 中 输入 文本 “Dreamweaver CS6 DIY 教程 ” 并 新 建 CSS 规则 ， 
设置 文本 居中 放置 ， 字 体 大 小 设 为 56， 颜 色 设 为 “#F00”( 红 色 )。 

04 单 击 “ 插 入 ” 栏 “ 布 局 ”面板 中 的 插入 AP 元 素 的 图 标 加 ， 在 文档 设计 视图 中 
插入 一 个 AP 元素。 调整 AP 元 素 大 小 及 位 置 。 这 时 在 设计 视图 中 的 效果 如 图 8-15 所 示 。 

05 在 AP 元 素 内 输入 文本 ， 然 后 执行 “窗口 ” | “AP 元 素 ” 命 令 打 开 AP 元 素 管 
理 面 板 ， 单 击 AP 元 素 名 称 前 的 眼睛 使 之 闭 眼 ， 如 图 8-16 所 示 。 这 样 ，AP 元 素 在 网 页 打 
开 时 是 不 可 见 的 。 

06， 用 鼠标 单 击 图 片 或 单 击 文档 窗口 中 状态 栏 上 HTML 标识 符 <img>， 表 示 选 择 该 
图 片 ， 执 行 “窗口 ” |“ 行为” 命令， 出现“ 行为” 面板。 
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让 
着 * Vmsrer\cban 与 糙 大 4 元 业 入 Jn 


四 aa CS6 
DIY 教 程 


,vob wt) (9) 入 


图 8-15 ”插入 AP 元 系 图 8-16 设置 apDiv 为 个 可 见 


076 单 击 行为 面板 左边 的 加 号 (+) 按钮 ， 从 弹出 的 下 拉 荣 单 中 执行 “显示 -隐藏 元 
素 ” 命 令 ， 弹 出 “显示 -隐藏 元 条 ”对 话 框 如 图 8-17 所 示 。 


元 来 : 


div “apDivl” 


[显示 ] [隐藏 ] [默认 ] 
图 8-17 “显示 -隐藏 元 素 ” 对 话 框 


08. 在 “显示 -隐藏 元 素 ” 对 话 框 中 单 击 “显示 ”按钮 后 ， 单 击 “ 人 确定 ”按钮 。 返 回 
文档 窗口 。 

093 单 击 事件 下 拉 列 表 按 钮 ， 从 弹出 的 事件 列表 来 单 中 选择 OnMouseOver。 

10 为 图 像 添 加 第 二 个 “显示 -隐藏 元 素 ” 行 为 ， 将 元 素 隐 藏 ， 这 时 事件 选 为 
OnMouseOnut。 

这 只 是 应 用 AP 元 素 的 显示 与 隐 中 属性 的 一 个 例子 。 其 实 利 用 AP 元 素 的 这 个 属性 可 
以 制作 很 多 特殊 的 效果 ， 如 当 用 户 单 击 某 个 按钮 时 显示 一 个 交互 表单 ， 单 击 男 一 个 按钮 时 
隐 忠 这 个 交互 表单 。 利 用 这 个 属性 也 可 以 制作 下 拉 采 单 ， 当 用 户 把 光标 移动 到 菏 个 项 目 上 
时 或 在 茶 个 项 目 上 单 击 鼠 标 ， 允 会 显示 一 个 下 拉 荣 单 ， 当 用 户 把 光标 移 走 时 ， 显 示 的 下 拉 
有 单 会 被 隐 医 起 来 。 


8.6 ”框架 


框架 可 以 将 文档 窗口 水 平 或 垂直 地 分 成 有 干部 分 ， 使 浏览 者 能 够 一 次 浏览 更 多 的 内 
容 。 在 一 般 情 况 下 ， 需 要 不 停 地 在 文章 内 容 和 导航 内 容 之 间 进 行 切换 。 但 是 ， 如 果 利 用 框 
染 结 构 ， 把 导航 内 容 永 远 固定 在 页 面 的 顶部 或 右边 ， 那 任何 时 候 都 可 以 直接 选择 上 面 或 右 
边 的 导航 内 容 ， 切 换 到 想 要 浏览 的 内 容 。 

表面 讲 过 可 以 使 用 表格 排列 Web 页 面 中 的 内 容 ， 但 是 如 果 页 面 中 的 每 一 个 超级 链接 
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Dearmmyoavor CCXB 宁 六 役 保 淮 实 创 弘 市 
打开 时 都 链接 到 新 的 页 面 是 很 不 方便 的 。 而 且 在 一 个 站 点 中 有 很 多 东西 是 相关 的 ， 如 每 一 
个 页 面 都 要 有 返回 主页 的 链接 ， 每 个 页 面 必 须 具 备 网 站 的 导航 栏 ， 这 样 浏览 者 才能 目 由 地 
访问 一 个 站 点 。 如 朱 这 些 内 容 都 需要 创建 不 同 的 文件 ， 既 增 大 了 工作 量 ， 也 当 巡 了 至 中 的 
网 络 空间 。 通 过 使 用 框 杂 ， 这 些 问 题 都 会 得 到 解决 。 简 单 地 次 ， 框 娘 功 能 刺 是 将 一 个 Web 
页 面 分 成 儿 个 部 分 , 其 中 每 一 个 部 分 都 是 独立 的 ,在 一 个 框架 中 的 超级 链接 可 以 指定 到 目 
标 框 染 , 这 样 在 打开 超级 链接 的 时 候 , 整个 页 面 保持 个 变 , 链接 的 凡 容 在 目标 低 架 中 显示 。 

使 用 框 染 使 访问 阁 的 浏 贤 右 不 需要 为 每 个 负面 章 新 加 载 与 于 航 相 关 的 图 形 , 而且 每 个 
杠 殿 都 可 以 具有 目 己 的 滚动 条 《如 于 内 容 太 大 窗口 显示 不 下 时 )， 因 此 访问 者 可 以 独立 该 
动 这 上 综 杠 架 。 其 好 处 是 ， 当 框 朵 中 的 内 容 页 面 较 长 时 ， 如 采 寻 航 条 位 于 不 同 的 框 朵 中 ， 那 
么 同 下 滚动 到 页 面 撒 部 的 访问 痢 束 不 需要 再 深 动 回 顶部 来 使 用 导航 条 。 

但 是 使 用 框 染 也 可 能 难以 实现 个 同 框架 中 各 元 素 图 形 的 精确 对 章 ; 导航 测试 可 能 很 耗 
时 间 ; 各 个 市 有 框 淋 的 页 面 的 URL 不 显示 在 浏览 需 中 ， 因 此 访问 者 可 能 难以 将 特定 页 面 
设 为 书签 。 

本 广 将 讲解 框架 的 几 种 形式 ， 建立 框 染 ， 以 及 框 染 的 编辑 和 修改 等 ,再 通过 一 个 具体 
的 示例 让 读者 更 清楚 地 了 解 框 淋 知 识 。 


8. 6. 1 创建 框架 


在 Dreamweaver CS6 中 创建 框架 集 有 两 种 方法 ,用户 可 以 目 己 设 计 , 或 者 从 预 设 的 框 
架 集中 选择 。 选 择 一 个 预 设 的 框架 集 将 目 动 地 建立 所 有 需要 的 框架 集 和 框架 来 创建 布局 ， 
这 也 是 问 页 面 中 插入 框架 布局 的 最 简便 的 方法 。 不 过 它 只 能 在 文档 窗口 的 设计 视图 中 创建 
框架 。 

1. 插入 预 设 框架 集 

预 设 的 框架 集 让 用 户 很 容易 地 从 中 选择 想 要 创建 的 框架 的 类 型 。 预 设 框架 集 的 图 标 位 
于 “插入 ”/“HTML”/“ 框 架 ” 采 时 中 ， 如 图 8-18 所 示 。 

使 用 预 设 框架 集 创建 网 页 ， 首 先 狐 建 一 个 HTML 文件 。 其 次 执行 “插入 ”|“HTML” 
|“ 框架 ”|“ 右 侧 及 下 方 散 人 套 ” 命 令 。 这 样 ， 在 文档 窗口 的 设计 视图 中 整 出 现 了 图 8-19 所 
不 的 框 染 。 


下 


提示 :在 对 象 面板 中 所 有 预先 定义 的 框架 集 四 标 都 是 由 两 种 颜色 组 成 的 。 其 中 蓝 


色 的 区 域 就 是 用 来 表示 在 创建 框架 后 , 原文 档 内 容 所 在 的 位 置 ， 其 余 的 空白 区 域 是 指 新 创 
建 的 框架 文档 所 在 的 位 置 。 

2. 日 建 框 架 

(1) 在 创建 框架 集 或 处 理 框架 前 ， 先 执行 “查看 ”| “可 视 化 助理 ”| “框架 边框 ” 
命令 ,使 “框架 边框 ”前 打上 勾 写 。 这 样 就 可 以 看 到 文档 窗口 中 的 框架 边框 了 。 当 框架 边 
框 显 示 出 来 后 ,文档 窗口 边框 周围 会 加 上 一 些 空间 , 这 在 文档 中 的 框架 区 域 提 供 了 一 个 视 
觉 化 指示 器 ， 光 标 停留 在 边框 上 时 会 变 成 双向 箭头 ， 如 图 8-20 所 示 。 
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标签 6)... Ctrl+E 


图 像 民 ) Ctr1+AlLt+I 

图 慑 对 和 象 (6) 

霸 体 出 ) 

霸 体 查询 出 ).. . 

表格 (T) Ctrl1+AlLt+T 

表格 对 象 心 ) 

布局 对 象 加) 

表单 F) » 

超级 链接 企 ) 

电子 邮件 链接 红 ) 

命名 销 记 WH) Ctrl+Alt+A 

日 期 种 ) 

服务 器 端 包 括 企 ) 

注释 总 ) 

水 平 线 包 ) 

模板 对 象 (0) 左 对 齐 已) 

最 近 的 代码 片断 外 ) 上 立 本 所 和 棍 和 ) 有 对 齐 尽 ) 

i 脚本 对 娟 中) 对 齐 上 练 (T) 

ee 、| ”文件 头 标签 0 ， 对齐 下 缘 中 ) 

hae 、 ”特殊 字符 (C) ”下 方 及 左 侧 嵌 套 和) 

ee 下 方 及 右 侧 嵌 套 0) 

InContext Editine!lT) 

数据 对 象 () 左 训 及 上 方 嵌 套 闻 ) 
左 侧 及 下 方 杠 套 

自 定 必 收藏 夹 J)... 右 训 及 下 方 嵌 套 C) 

获取 更 多 对 象 6)... 右 记 及 上 方 嵌 套 (6) 
上 方 及 下 方 ff) 
上 方 及 左 侧 柚 套 (0) 
上 方 及 右 钢 嵌 套 
IFRAME 

图 8-18” 预 设 框架 集 
0 (XHTHL)* = 
Ns 
LL REnemeinirne] [NW QA Io% ~ 回国 [| 352xt 
图 8-19 框 染 图 8-20” 显示 框 染 边框 


(2) 在 文档 窗口 中 拖 动 左边 的 框架 边框 到 中 间 位 置 ， 这 时 文档 的 设计 视图 如 图 8-21 
所 示 。 
(3) 在 文档 窗口 中 拖 动 压 部 的 框 染 边框 到 中 间 位 疙 , 完成 的 边框 制作 如 图 8-22 所 示 。 
3. 创建 膀 套 框架 集 
框 染 集 之 内 放 入 为 一 个 框架 集 称 为 钥 僚 框 染 集 。 每 个 独创 建 的 框 染 集 痢 包括 它 目 己 的 
框 染 集 HTML 文档 和 框 染 文 档 。 大 多 数 网 页 使 用 的 框架 实际 上 是 垦 侠 框 染 ， 而 且 在 
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[ys 
击 wntitledFrameset-4 (XHTHL) * = 


[RD Q 1% ~v 回回 | 435 x: 


图 8-21 分 成 左 、 右 两 个 框架 图 8-22 最终 效果 


创建 一 个 藤 套 框架 集 的 过 程 很 简单 ， 只 要 选取 一 个 框架 , 然后 以 这 个 框架 为 整体 设置 
一 个 框架 集束 可 以 了 。 可 以 使 用 Dreamweaver CS6 目 市 的 框架 集 ， 也 可 目 行 设 定 框架 。 下 
面 创建 一 个 图 8-23 所 示 的 框架 。 


本 例 执 行 以 下 操作 : 
0 新 建 一 个 文档 ， 然 后 执行 “但 看 ”| “可 视 化 助理 ”| “框架 边框 ”命令 ， 使 


文档 窗口 中 的 框架 边框 可 见 。 
02 在 文档 窗口 中 拖 动 顶 部 的 框架 边框 到 中 上 部 位 置 ， 这 时 文档 的 设计 视图 ， 如 图 


8-24 所 示 。 


图 8-24 分 成 上 下 两 框 染 


图 8-23 ”本 例 效 有 果 
03 把 光标 定位 在 下 面 的 框架 内 ， 执 行 “ 修 改 ” | “框架 集 ” | “ 拆 分 左 框架 ” 
令 ， 此 时 在 原来 的 框架 中 就 出 现 了 一 个 新 的 框架 集 ， 构 成 了 如 图 8-23 所 示 的 堪 套 框架 
构 。 
8.6.2 创建 NOFRAMES 内 容 
由 于 早期 版 本 的 浏览 器 不 支持 框架 ， 当 页 面 中 含有 框架 时 ， 浏 览 器 就 不 能 正确 显示 页 
面 的 内 容 ， 这 时 必须 编辑 一 个 无 框架 文档 。 当 不 支持 框架 的 浏览 器 载 入 框架 体 文件 时 ， 济 


命 
十 
条 


响 融 只 会 显示 出 无 框架 和 内容。 
编辑 无 框架 内 容 的 具体 操作 步 又 如 下 : 
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(1) 打开 一 个 包含 框架 集 的 文件 ， 执 行 “ 修 改 ”| “框架 集 ”| “编辑 无 框 桨 内 容 ” 沫 
时 和 地。 

(2) 此 时 当前 的 文档 内 容 会 被 清除 ， 正 文 区 域 的 上 方 出 现 “无 框架 内 容 ” 字 样 。 在 
状态 栏 中 也 出 现 了 一 个 <noframe> 标 签 ， 如 图 8-25 所 示 。 可 以 在 该 窗口 中 输入 文本 、 插 入 
图 像 、 编 辑 表格 、 制 作 表 单 等 ， 但 是 不 能 在 该 窗口 中 创建 框 染 。 


E 
二 wntitlearrameset-4 [XHTHL)* = |, 


无 框架 内 容 | 


<noframe》 标 记 


nofr ames bodyy [IR| 凶 100% v 回回 世 | 445 x: 


图 8-25 ”编辑 NOFRAMES 内 容 
(3) 再 次 执行 “修改 ”|“ 框 架 集 ”|“ 编 辑 无 框架 内 容 ” 命 令 ， 人 返回 到 文档 窗口 中 。 


8. 6.3 选 定 框架 或 框架 集 


1. 选取 整个 框架 

因 认 情况 下 ,建立 框架 组 时 会 日 动 选 择 整 个 框 染 作为 操作 对 象 ， 此 时 框 染 组 中 所 有 框 
染 的 边界 都 会 被 虚 线 包 围 。 

如 果 当 前 选择 的 是 一 个 子 框架 , 需要 重新 选择 整个 框架 组 ， 可 以 将 光标 移动 到 某 个 边 
框 位 置 ， 当 光标 变 为 水 平 双 辐 箭 头 〈 左 右边 框 ) 或 垂直 双 辐 箭头 (上 下 边框 ) 时 ， 单 击 边 
框 即 可 选中 整个 框架 组 ; 或 者 可 以 将 光标 移动 到 第 一 次 分 割 框 染 的 边框 位 置 ， 当 光标 变 为 
水 平 双向 箭头 《左右 边框 ) 或 垂直 双向 箭头 〈 上 下 边框 ) 时 ， 单 击 边 框 即 可 选中 整个 框架 
组 

2. 选择 子 框架 

执行 “窗口 ”| “框架 ”命令 ， 出 现 框 架 管 理 面 板 ， 如 图 8-26 所 示 。 

在 框架 管理 面板 中 要 选 的 子 框架 的 位 置 上 单 击 鼠 标 ， 或 在 文档 窗口 中 按 住 Alt 键 ， 然 
后 用 鼠标 单 击 文档 窗口 中 欲 选择 的 子 框架 。 文 档 窗 口中 该 子 框架 的 周围 被 虚线 包 
围 ， 表 示 它 已 经 被 选中 ， 如 图 8-27 所 示 。 

3. 选择 航 套 框架 组 

将 光标 移动 到 骸 套 框 染 组 中 子 框架 公共 的 边框 ， 当 光标 变 为 水 平 双 问 入 头 ( 左 
右边 框 ) 或 王 直 双 癌 第 涉 ( 上 下 边框 时， 单 击 边 框 即 可 选中 骸 僚 框 染 组 ， 此 时 文 
档 窗 口中 花 套 框架 组 的 周围 被 虚线 包围 ， 表 示 已 经 被 选中 ， 如 网 8-28 所 示 。 
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malnFrame 


图 8-26 框 染 兴 理 面板 图 8-27 选择 一 个 子 框 染 


图 8-28 选择 一 个 秽 套 框架 


8. 6.4 ”框架 与 框 染 集 属 性 

1. 框架 的 属性 

在 对 框架 或 者 框架 集 进行 属性 设置 的 时 候 , 首先 要 选取 所 要 进行 属性 设置 的 框架 或 者 
框架 集 。 选 取 了 框架 后 ， 文 档 窗口 下 闹 将 出 现 框 架 属 性 面板 ， 如 图 8-29 所 示 。 


属性 
器 | 框架 名 称 。 源 文 件 (8) ltopFrane. htnl 全 局 ”过 框 包 | 默认 |v| 
topFrane | 滚动 @) | 否 。” ”|v| 回 不 能 调整 大 小 @@) 边框 上 色 CC) 厂 ,| 
边界 宽度 
这 界 高 度 0 


图 8-29 ” 框 染 属性 面板 


通过 对 面板 中 的 各 个 属性 设置 来 设置 框架 的 属性 。 

C1) “框架 名 称 ”: 可 以 对 框 涤 进行 命名 ， 以 方便 在 代码 中 进行 编辑 ， 在 左边 的 缩 
上 略图 中 显示 了 当前 选择 的 框 染 在 框 染 集中 的 位 置 。 框 染 名 称 必须 是 单个 单词 ， 且 允许 使 用 
下 划 线 ( )， 但 不 允许 使 用 连 字 人 符 ()、 句 点 () 和 空格 ， 或 是 JavaScript 中 的 保留 字 《〈 例 
如 top 或 navigator) 。 框 架 名 称 必 须 以 字母 起 始 ， 区 分 大 小 写 。 

(2) “ 源 文 件 ”: 指定 框 染 源 文件 的 路 人 径 与 名 称 。 

(3) “ 深 动 ”: 指定 在 框架 中 是 否 显 示 深 动 条 。 将 此 选项 设置 为 “默认 ”将 不 设置 
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相应 属性 的 值 ， 从 而 使 各 个 浏览 占 使 用 其 默认 值 。 大 多 数 浏 览 右 献 认 为 “ 目 动 ”， 这 意味 
看 只 有 在 浏览 器 窗口 中 没有 足够 军 间 来 显示 当前 框架 的 守 整 内 容 时 才 显 示 滚 动 条 。 

(4) “边框 ”: 选择 是 否 在 浏览 堪 中 显示 框 惧 的 边框 ， 共 有 3 个 选项 ， 分 别 是 “是 ” 
(显示 边框 ) 、“ 合 ”《 隐 藏 边框 》 和 “的 认 ”。 

(5) “边框 闫 色 ”: 设 管 当前 框 染 边 框 的 闫 色 。 选 择 一 种 凑 色 后 ， 其 右边 的 文本 框 
中 将 目 动 项 入 颜色 的 十 六 进 制 值 。 

(6) “不 能 调整 大 小 ”: 决定 是 否 允 许 该 者 改动 框架 的 大 小 。 选 中 此 项 访问 者 将 无 
法 通过 拖 动 框 染 边框 在 浏览 器 中 调整 框 染 大 小 。。 

407)“ 边 界 宽 度 ”: 设置 内 容 与 框 染 边 框 左右 的 距离 (框架 边框 和 内 容 之 间 的 空间 ) 。 

(8)“ 边 界 高 度 ”: 设 前 内 容 与 框 染 边框 上 下 的 距离 ( 框 染 边框 和 内 容 之 间 的 空间 )。 

2. 框架 集 的 属性 

选中 了 一 个 框架 集 后 ， 文 档 窗口 的 下 站 将 出 现 框 淋 集 属性 和 面板， 如 图 8-30 所 示 。 


一 | “框架 集 边框 @) 再 v| 边框 地 色 (C) [ -| 
| 5: 2 边框 宽度 | 


GE 


值 单位 由 
行 80 像素 。 |Y| 议定 范围 


上 


图 8-30 ”框架 集 属性 面板 


在 框 染 集 属性 面板 中 ， 各 项 属性 功能 介绍 如 下 : 

“ 框 染 集 ”: 此 属性 显示 了 当前 选 定 的 框架 集中 所 包含 的 框架 行 数 和 列 数 。 

“边框 ”: 选择 是 否 在 浏览 其 中 显示 框 染 的 边框 。 要 显示 边框 ， 选 择 “ 是 ”; 要 使 浏 
筑 天 不 显示 边框 ， 选 择 “ 侣 ”; 由 浏览 旧 确 定 是 人 盏 显示 边框 ， 选 择 “ 上 默认 ”。 

“边框 颜色 ”: 用 于 设置 边框 的 颜色 。 

“边框 宽度 ”: 用 于 设置 边框 的 宽度 。 

“行列 选 定 范 围 ”: 用 于 设置 选 定 框 以 集 各 行 和 各 列 框 洪 的 大 小 。 点 击 “ 行 列 选 定 范 
围 ” 框 内 的 标签 ， 选取 行 或 列 ， 然 后 在 “ 值 ” 域 中 输入 数字 设置 所 选 行 或 列 的 矿 寸 , 在 “ 单 
位 ”中 设置 “ 值 ”域内 数字 的 单位 。 


8.6.5 改变 框架 的 背景 色 


如 果 和 需要 改变 框架 中 文档 的 背景 闫 色 , 可 以 改变 所 在 框架 的 背景 颜色 来 改变 文档 的 背 
景 闫 色 。 要 改变 框架 中 文档 缘 景 闫 色 ， 先 将 光标 放置 在 需要 改变 背景 闫 色 的 框架 中 ， 执行 
“修改 ”| “页 面 属 性 ”人 命令， 出现“ 页 面 必 性” 对话 框 。 再 在 “背景 颜色 ”文本 框 中 输 
入 所 需要 的 背景 赢 色 。 
8. 6.6 框架 的 删除 

删除 框架 的 操作 比较 特殊 ， 因 为 Delete 键 不 能 删 挥 框架 。 删除 框 架 的 方法 是 : 将 光标 
放 在 欲 删 除 框架 的 边 枉 上 ， 当 光标 会 变 为 双 回 箭头 时 ， 按 住 鼠 标 左 键 将 它 拖 出 父 框架 或 页 
面 之 外 即 可 删除 。 如 果 对 HTML 语言 熟悉 的 话 ， 可 以 直接 在 文档 的 HTML 代码 中 删除 框 


采集 。 
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BV Va CL KB vw SP [各 ;| 创 六 < 
8. 6.7 保存 框架 和 框架 集 文件 


建立 框架 结构 的 文档 时 ， 由 于 每 一 个 子 框 染 代表 一 个 单独 的 网 页 ， 所 以 在 保存 文件 时 
不 但 要 保存 整个 文档 的 框 染 结构 ， 也 必须 要 保存 各 个 子 框 染 ， 盏 则 框架 中 的 内 容 会 丢失 。 
框架 和 框 染 集 的 文件 你 存 方法 如 下 : 

执行 “文件 ”| “保存 全 部 ”命令 ， 弹 出 一 个 保存 文件 窗口 ， 同 时 会 显示 整个 框架 被 
选中 的 状态 ， 如 图 8-31 所 示 。 

在 弹出 的 保存 文件 窗口 中 输入 文件 名 ， 然 后 蛙 击 “你 存 ” 按 钮 你 存 整 个 框架 。 接 看 ， 
又 会 弹出 下 一 个 你 存 文件 的 窗口 ， 同时 文档 窗口 正 要 保存 的 文件 所 在 的 子 框架 被 选中 。 在 
弹出 的 保存 文件 窗口 中 输入 文件 名 ， 然后 日 击 “ 保 存 ” 按 钮 保存 该 子 框架 。 这 样 可 以 保存 
多 个 子 框 架 。 如 果 有 mn 个 框 名 ， 束 必须 保存 n+l 次 文件 。 


DW 国 r 涂 r 品 v 设计 器 。 = all 
文件 (FT) 编辑 (EF) 查看 (Y) 插入 (I) 修改 人 ”格式 (0) 人 靖 令 [5C) 站 点 (53) 窗口 内 ) 帮助 0D 


[af 


UntitledFrameset-8* XX 


| | 代 到 | 拆 分 [ 设计 || 实时 视图 | 加 .图 . 哈 bp 所 % 寺 . 标题 :无 标 题 文档 sa 文件 
EE 名 n ls 


纪 巾 ，css... 
Pa 
乡 
保存 在 如 ): 加 框架 实例 本 ' < 只 标签 
加 Scripts 乡 
< 扰 leftframe. html 9 插入 
我 最 近 的 交 档 ”| 筷 |mainframe2. html 哩 数据 
乡 


扰 | mainframe. html 2 
乡 一 
大] textandalink htnl 纠 经 乌 定 
A 


扰 | topframe. html 已 

大 | 框架 实例 . html 服务 ... 
2 
四 Rus 


WA 

乡 Hn 

2 

引 国 框架 
WA 

2 

2 

WA 

Adob... 


文件 名 全 ): ntitledFrameset-8. htm | 


保存 类 型 (T): Al Documents (*.htm:;*.html;*. shtm;*. | 取消 


Uni code 标准 化 表单 F): c (规范 分 和 解 ， 后 跟 规 范 合 成 ) | | 
口 包 括 lnicode 签名 (BOM) (5) 站 点 根 目录 AAAAAA 


0 
K /1 秒 Unicode (UTF-8) 
F| 框架 集 边框 8) | 否 vx | 边框 额 色 CC) [| 
到 | 2 ”边框 宽度 WD | 


什 W) 单位 WD 
行 80 | | 像 来 。 | 迁 定 范围 


图 8-31 保存 整个 框架 的 显示 


如 果 执 行 “ 文 件 ”| “保存 框 漆 页” 命令， 或 是 执行 “文件 ”| “ 框 染 集 为 存 为 ” 命 


令 ， 则 只 会 保存 整个 框架 文件 。 不 过 在 最 后 退出 时 ,会 弹出 对 话 框 询问 是 否 保存 各 个 子 杠 
架 的 内 容 。 


8.6.8 ”使 用 链接 控制 框 染 的 内 容 


采用 框架 结构 , 一 个 原因 是 为 了 在 同一 窗口 中 可 以 同时 显示 多 个 文件 ， 另 一 个 原因 是 
可 以 及 用 导航 条 技术 方便 地 实现 各 文件 之 间 的 切换 。 

要 在 一 个 框架 中 使 用 链接 以 打开 为 一 个 框 染 中 的 文档 , 必须 设置 链接 目标 ,链接 的 “ 目 
标 ” 属 性 指定 打开 链接 内 容 的 框 染 或 窗口 。 例 如 ， 导 航 条 位 于 左 框 染 ， 并 且 希 望 链 接 的 材 
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料 显 示 在 右 侧 的 主要 内 容 框 染 中 , 则 必须 将 主要 内容 框 以 的 名 称 指定 为 每 个 导航 条 链接 的 
目标 。 当 访问 者 里 击 导 航 链 接 时 ， 将 在 主 框 染 中 打开 指定 的 内 容 。 
要 选择 将 在 其 中 打开 文件 的 框架 ， 应 使 用 属性 检查 右 中 的 “目标 ”弹出 式 染 单 。 
设置 目标 框架 执行 以 下 操作 : 
(1) 在 设计 视图 中 ， 选 择 文本 或 对 象 。 
(2) 在 属性 检查 右 的 “链接 ” 域 中 ， 单 击 文件 夹 网 标 并 选择 要 链接 到 的 文件 。 
(3) 在 “目标 ”弹出 式 菜 单 中 ， 选 择 链接 文档 要 显示 的 框架 或 窗口 。 
如 果 在 属性 检 僵 右 中 命名 了 框 染 ， 则 框架 名 称 将 出 现在 此 末 单 中 。 选 择 一 个 命名 框 染 
以 打开 该 框 染 中 链接 的 文档 。 
“目标 ”下 拉 列 表 的 各 选项 功能 介绍 如 下 : 
_blank: 在 新 的 浏览 左 窗 口中 打开 链接 的 文档 ， 同 时 保持 当前 窗口 不 变 。 
_parent: 在 显示 链接 的 框 染 的 父 框 染 集中 打开 链接 的 文档 ， 同 时 督 换 整 个 框 淋 
_self; 在 当前 框 染 中 打开 链接 ， 同 时 蔡 换 该 框 染 中 的 内 容 。 
_top: 在 当前 浏览 夯 窗 口中 打开 链接 的 文档 ， 同 时 登 换 所 有 框 娘 。 
其 他 框架 名 ; 在 以 该 名 称 命名 的 框 案 中 打开 页 面 ， 同 时 蕉 换 该 框 染 中 的 内 容 。 


演 


Te 


提示 :有 在 框架 集 内 编辑 文档 时 才 显 示 框架 名 称 。 在 文档 自身 的 文档 窗口 中 编 
辑 该 文档 时 〔 在 框架 集 之 外 )， 框 架 名 称 不 显示 在 “目标 ”弹出 式 菜单 中 。 如 果 正 编辑 杠 
架 集 外 的 文档 ， 则 可 以 将 目标 框架 的 名 称 键入 “目标 ”文本 框 中 ， 

如 果 正 链接 到 站 点 外 的 菜 一 页 面 ， 清 始终 使 用 “目标 ”="_top' 或 “目标 ”="_blank 


8. 6.9 框架 的 应 用 


利用 框 染 结构 ， 可 以 把 导航 条 内 容 国 定 在 页 面 的 项 部 或 右边 。 任何 时 候 用 户 都 可 以 直 

接 选 择 上 和 面 或 右边 的 导航 内 容 , 切换 到 想 要 浏览 的 内 容 。 下 和 面 通过 一 个 示例 说 明 访 操作 的 
过 程 。 本 例 最 终 效 果 ， 如 图 8-32 所 示 。 页 面 由 上 框架 、 左 下 框架 和 右 下 框架 组 成 ， 分 别 
用 于 显示 主题 、 导 航 和 教程 的 内 容 。 单 击 寻 般 按 钮 时 ， 右 下 框架 将 显示 相应 的 内 容 。 

0 全 新 建 一 个 HTML 文档 。 

0 全 选择 “插入 ”| “HTML2”| “框架 ”| 上方 及 左 侧 能 套 ” 沫 单 命令 插入 框架 ， 调 
整 各 框架 大 小 至 如 图 8-33 所 示 效 果 。 

03 执行 “窗口 ”| “框架 ”命令 ， 调 出 框架 管理 面板 。 

04 在 框架 管理 器 中 单 击 顶部 的 框 如 ， 上 自动 选择 文档 窗口 顶部 的 框架 。 这 时 出 现 框 
架 属 性 设置 面板 , 在 框架 属性 设置 面板 的 “框架 名 称 ” 文 本 框 中 输入 框架 的 名 称 TopFrame， 
其 余 选 项 保持 系统 默认 的 设置 。 

03 用 同样 的 方法 给 左下 部 和 右 下 部 的 框 染 分 别 命 名 为 LeftFrame 和 MainFrame。 

06， 用 鼠标 右键 单 击 TopFrame 框架 内 部 ， 在 弹出 上 下 文 荣 单 中 执行 “页 面 属性 ” 
命令 ， 调 出 “页 面 属性 ”对 话 框 ， 在 该 对 话 框 中 对 选中 “分 类 ”列表 框 中 的 “外 观 ” 进 行 
设置 ， 具 体 设 置 值 见 图 8-34 所 示 。 
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“Dreamweaver CS6 DIY 教 程 


y 前 计 


近年 来 ， 信 息 技 术 发 展 和 应 用 突飞猛进 ， 互 联网 已 经 成 为 第 四 媒体 ， 使 全 球 信息 共 
享 成 为 现实 。 越 来 越 多 的 公司 、 机 构 乃 至 个 人 都 拥有 了 自己 的 网 员 或 网 站 ， 网 络 经 济 逐 
步 成 为 当今 最 热门 的 话题 之 一 。 一 个 成 功 的 网 站 可 以 很 清楚 地 将 网 站 的 内 容 和 特色 传递 
给 浏览 者 ， 因 此 ， 如 何 设 计 出 与 众 不 同 、 独 树 一 帜 的 网 站 就 成 了 设计 者 的 重要 课程 。 

本 章 自 先 介绍 一 些 网 络 和 网 贝 制作 的 基本 知识 ， 然 后 简要 介绍 点 debe 公 司 推出 的 梦 勾 


组 合 一 -Dreamweaver CS6。Flash CS6 和 Firewrotrks CS6。 它们 锌 盖 了 网 页 制作 与 站 点 管理 
(Dreamweaver” 、 网 页 动画 制作 《Flash 及 网 页 图 像 处 理 (Fireworks》， 是 使 用 最 多 的 
网 页 制作 工具 之 一 。 


r 


ooovoooeeo 


外 观 (SS) 
页 面 字体 灾 ) : | 默认 字体 
大 小 (5): 
文本 颜色 各 ): 卓 | 
背景 颜色 (B): | -| 
背景 图 像 (I): File: /IC |/Inetpub/wwwroot/ test/im:| 
重复 (E): | v 


左边 距 f) : | 右边 距 人 R:| | 
上 边 距 (P): 下 边 距 (0): 


manos ne 


[<framese t [RW io% vy 国 同 | 406 x: 


CR [本 [Ca CE 


图 8-33 ”创建 框架 图 8-34 ”设置 TopFrame 的 负面 属性 


07 在 TopFrame 框架 内 输入 文本 :“Dreamweaver CS6 DIY 教程 >。 然后 新 建 CSS 
规则 设置 文本 的 属性 :“ 了 字体 ”为 隶书 、“ 大 小 ”为 56、 文 本 磊 色 设置 为 “#00”， 居 中 放 
管 。 


08 用 鼠标 右键 单 击 LeftFrame 框架 内 部 ， 在 弹出 上 下 文 菜 单 中 执行 “页 面 属性 ” 
命令 ， 调 出 “页 面 属 性 ”对 话 框 ， 在 对 话 框 设 置 属性 “背景 颜色 ” 值 为 “#AED433 ”。 

09 在 LeftFrame 框架 内 ， 插 入 一 个 5 行 1 列 的 表格 ， 然 后 在 属性 面板 上 设置 表格 
的 宽度 为 220 像素 ， 边 框 粗细 为 0。 

10 将 光标 放置 在 表格 第 1 行 的 单元 格 中 , 设置 单元 格 内 容 水 平 左 对 齐 ， 王 直 居中 ， 
然后 单 击 “ 常 用 ”插入 面板 中 的 “图 像 ” 按 钮 ， 在 该 单元 格 中 插入 一 个 导航 图 像 。 选 中 图 
价 ， 狐 建 CSS 规则 ， 选 择 器 类 型 为 “类 ” 蛙 击 “确定 ”按钮 ， 在 弹出 的 规则 定义 对 话 框 
中 选择 “边框 ”分 类 ， 设 置 图 厂 边 框 为 0。 

11 用 同样 的 方法 插入 其 余 4 个 导航 图 像 , 如 图 8-35 所 示 。 然 后 在 属性 面板 上 的 “ 链 
接 ” 文 本 框 中 设置 链接 目标 ， 目 标 文件 打开 方式 为 mainframe。 
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图 8-35 ”插入 导航 图 像 后 的 页 面 


1 全 用 鼠标 右键 单 击 MainFrame 框架 内 部 ， 在 弹出 上 下 文 菜 单 中 执行 “页 面 属性 ” 
命 售 ， 调 出 “页 和 面 属性 ”对 话 框 ， 在 对 话 框 设置 背景 图 像 。 

13 在 MainFrame 框架 内 输入 文本 并 调整 文字 格式 。 

1 人 4 执行 “文件 ”| “保存 全 部 ”命令 ， 出 现 保存 文件 窗口 ， 同 时 会 显示 整个 框架 
被 选中 的 状态 。 在 文件 保存 窗口 中 选择 合适 的 保存 目 录 后 ,在 文件 名 的 输入 框 内 输入 一 个 
文件 名 ， 再 单 击 “ 保 存 ” 按 钮 保存 整个 框架 。 接 着 会 要 求 保 存 下 一 个 子 框架 文档 ， 同 时 在 
文档 窗口 中 ， 被 选择 保存 的 子 框架 周围 会 出 现 一 个 虚线 框 ， 在 保存 文件 窗口 中 的 文件 名 输 
入 框 内 输入 一 个 文件 名 后 你 存 。 此 后 ， 还 会 同样 出 现 两 次 保存 文件 的 窗口 ， 同 时 会 选择 其 
他 的 子 框 淋 ， 依 次 你 存 这 些 文档 。 

155 执行 “文件 ”| “新 建 ” 命 令 ， 新 建 一 个 无 框架 普通 文档 ， 如 图 8-36 所 示 。 


第 4 章 文本 与 超级 链接 
本 章 重 点 


图 8-36 textandlink.html 


16。 保存 文件 为 “文本 与 链接 ”按钮 设置 时 链接 属性 所 指向 的 文件 名 textanlink.html。 


再 用 同样 方法 制作 其 他 文件 。 

完成 以 上 步 又 束 可 在 浏览 器 中 测试 作品 效果 了 ,浏览 器 窗口 顶部 的 “Dreamweaver CS6 
DIY 教程 ”和 左边 的 导航 按钮 是 固定 不 变 的 , 右边 则 根据 用 户 选 择 不 同 的 导航 图 像 而 显示 
相应 的 内 容 。 例 如 ， 当 用 户 单 击 左边 的 “文本 与 链接 ”按钮 时 ， 在 右边 的 框 染 中 会 打开 相 
应 的 内 容 ， 如 图 8-37 所 示 。 
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让 区 阴 桨 难 罕 创 役 户 
Dreamweaver CS60 DTY 教 各 
yy 第 4 章 文本 与 超级 链接 


本 章 重 点 
本 章 将 介绍 文本 与 超级 链接 的 基本 知识 


Wey 及 使 用 方法 ， 内 容 包 括 : 添加 普通 文本 、 揪 
入 特殊 符号 和 插入 日 期 的 方法 ; 对 文本 的 格 
式 人 设置 ， 三 种 超级 链接 的 概念 与 功能 ; 创建 
页 | 各 种 超级 链接 的 方法 ， 包 括 使 用 属性 面板 创 
建 链 接 、 链 接 到 文档 中 指定 位 置 、 创 建 指向 E 
= mai1 地 址 的 超 链 接 等 。 


学 习 目 的 


图 8-37 ”实例 效果 图 


8.7 动手 练 一 练 


1. 在 文档 窗口 中 插入 多 个 大 小 不 同 的 AP 元 素 ， 然 后 将 这 些 AP 元 素 调整 到 大 小 一 
致 、 间 隔 相 同 、 水 平 对 齐 。 

2. 利用 AP 元 素 技术 实现 图 片 交 换 ， 即 网 页 中 放 一 张 图 像 ， 当 光标 移 到 图 像 上 时 ， 
此 图 像 被 隐藏 的 同时 显示 另 一 张 图 像 。 

3.， 在 文档 窗口 中 创建 一 个 先 上 下 划分 再 对 下 边框 架 进 行 左 右 划 分 的 框架 ， 在 
leftframe 框架 中 输入 多 行文 本 ， 并 分 别 对 这 些 文 本 创建 链接 ， 这 些 链接 的 文件 显示 在 
mainframe 框架 中 。 保 存 框架 和 所 有 文档 。 


8.8 思考 题 


1. 有 儿 种 方法 可 以 创建 能 套 AP 元 素 ? 使 用 悉 套 AP 元 么 能 实现 哪些 效 末 ? 
2. 使 用 框架 实现 网 页 布局 有 哪些 优 缺 点 ? 
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第 9 章 表单 队 应 用 | 
| 


4 本章 导读 

Vi RE Rh 人 

产 WS 让 
‘1 


”本章 将 介绍 表单 的 基本 知识 及 使 用 方法 。 内 容 包 括 : 表单 的 创建 , 各 种 
表单 对 象 的 添加 及 属性 设置 。 这 些 表单 对 象 包 括 文本 域 、 单 选 框 、 复 选 框 、 
文件 域 、 按 钮 、 图 像 域 、 列 表 /菜单 、 跳 转 菜单 、 隐 藏 域 、Spry 表单 验证 构 : 
件 ， 以 及 表单 的 简单 处 理 等 。 其 中 文本 域 、 单 选 框 、 复 选 框 、 按 钮 是 表单 常 
用 的 基本 对 象 ， 要 重点 掌握 。 
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Adobe Dreamweaver CS6 
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创建 表单 

插入 表单 对 象 
设置 表单 对 象 属性 
处 理 表单 
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0 COB 守 交 届 各 准 旬 他 家 办 


9.1 创建 表单 


在 条 一 网 站 上 注册 时 ,所 填 瑟 的 那些 内 容 束 是 由 表 竺 来 实现 的 。 使 用 表单 可 以 收集 来 


目 用 户 的 信息 ， 建 立 网 站 与 浏览 者 之 间 沟 通 的 桥 桨 。 获 取 用 户 购 物 订 单 ， 收 集 、 分 析 用 户 
的 反馈 意见 ， 做 出 科学 合理 的 决策 ， 是 一 个 网 站 成 功 的 重要 因素 。 有 了 表单 ， 网 站 不 仅 是 
信息 提供 者 ， 同 时 也 古 信息 收集 者 。 信息 由 被 动 所 供 转 变 为 主动 收集 。 表 单 是 交互 式 网 站 
的 基础 ， 在 网 页 中 得 到 广泛 应 用 。 


9. 1.1 表单 概述 


表单 中 包含 多 种 对 象 ， 或 者 称 作 探 件 ， 例 如 可 以 用 文本 框 输入 文字 ， 用 按钮 上 友 送 命令 
等 。 所 有 这 些 控件 与 在 Windows 各 种 应 用 程序 中 过 到 的 非 党 相似 。 

要 完成 从 用 户 处 收集 信息 的 工作 ,仅仅 使 用 表单 是 不 够 的 ， 一 个 完整 的 表单 应 该 有 两 
个 重要 组 成 部 分 : 一 是 摘 述 表单 的 HTML 源码 ， 即 表单 对 象 ， 用 于 在 网 页 中 进行 描述 ， 
接受 用 户 信 息 ; 为 一 个 用 于 处 理 用 户 在 表单 域 中 输入 信息 的 服务 器 六 应 用 程序 也 可 以 是 
客户 端的 脚本 ， 如 CGI、JSP、ASP 等 。 

使 用 Dreamweaver CS6 可 以 创建 市 有 文本 域 、 密 但 域 、 单 选 按钮 、 复 选 框 、 弹 出 式 荣 
单 、 可 单 击 按钮 等 表单 对 象 的 表单 。 还 可 以 通过 使 用 文本 编辑 堪 目 行 编写 脚本 或 应 用 程序 
来 验证 用 户 输入 信息 的 正确 性 , 例如 可 以 检查 某 个 必须 填写 的 文本 域 是 否 包 含 了 一 个 特定 
的 值 。 

第 用 的 脚本 人 处理 语言 有 Java、C、Perl 和 JavaScript 等 。 

此 外 Dreamweaver CS6 集成 了 Adobe 公司 的 轻 量 级 的 AJAX 框架 Spry。 利 用 Adobe 
添加 的 一 系列 预制 的 表单 验证 组 件 ， 用 户 可 以 更 加 轻松 快捷 地 以 可 视 方式 设计 、 开 发 和 部 
普 动 态 用 户 界 面 ， 在 减少 页 面 刷新 的 同时 ， 提 高 交互 性 、 速 度 和 可 用 性 。 

9.1.2 插入 表单 

“插入 ” 栏 的 “表单 ”面板 如 图 9-1 所 示 。 

在 插入 表单 对 象 之 前 ， 必 须 在 文档 中 插入 表单 。 驳 在 文件 中 ， 将 光标 置 于 表单 要 插入 
的 位 置 。 再 执行 “插入 ”|“ 表 单 ”| “表单 ”命令 ， 或 者 单 击 “ 表 单 ” 插 入 面板 中 的 “ 表 
单 ” 按 钮 上 是， 完成 添加 表单 对 象 。 最 终 的 创建 效果 如 图 9-2 所 示 。 


插入 | 二 元 来 | 二 

表单 了 回 | 口 EI 加 | 有 (XHTHL)* ol 
加 已 | 机 口 | 己 民 必 
瑟 生 到 和 二 民 | 人 


body> <form#forml >|<p 100% 。 v| 回 
图 9-1 表单 面板 图 9-2 表单 边框 
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的 二 :| 建 好 一 个 表单 后 ， 文 件 中 会 出 现 一 个 红色 的 点 线 轮 席 ， 如 图 9-2 所 示 ， 
如 果 看 不 到 这 个 轮 廊 的 话 ， 执 行 “ 查 看 ”|“ 可 视 化 助理 ”| “隐藏 所 有 ”命令 ， 
表单 标记 可 以 区 套 在 其 他 HTML 标记 中 ， 其 他 HTML 标记 也 可 以 网 套 在 表单 中 。 然 而 ， 
_ 一 个 表单 不 能 暴 亦 在 另 一 个 表单 中 


9.1.3 设置 表单 属性 


表单 的 属性 设置 可 以 通过 属性 面板 得 以 实现 。 创 建 完 表单 后 ， 选 中 表单 即 可 打开 表单 
属性 面板 ， 如 图 9-3 所 示 。 


属性 二 


| 图 表单 ID 动作 加 目标 0) | 类 @) | 无 |w| 
form 方法 默认 v| 编码 类 型 四 


图 9-3 ”表单 属性 面板 


在 属性 面板 中 各 参数 介绍 如 下 : 

> “ “表单 ID”: 对 表单 命名 以 进行 识别 ， 只 有 为 表单 命名 后 表单 才能 被 JS 或 VBS 
等 脚本 语言 引用 或 控制 。 

> “ “动作 ”: 注 明 用 来 处 理 表 单 信 息 的 脚本 或 程序 所 在 的 URL。 

> “ “方法 ”: 选择 将 表单 数据 传输 到 服务 人 右 的 方法 。“ 了 POST ”方法 将 在 HTTP 请 
求 中 骸 入 表单 数据 ， 将 表单 值 以 消 居 方式 送出 ; “GET ”方法 将 被 提交 的 表单 值 
作为 请 求 该 页 面 的 URL 的 附加 值 友 送 ; “默认 ”方法 使 用 浏览 如 的 献 认 设 置 将 
表 蛙 数据 友 送 到 服务 器 。 通 第 ， 默 认 方 法 为 GET 方法 。 

> “目标 ”: 在 目标 窗口 中 显示 调用 程序 所 返回 的 数据 。 如 果 命 名 的 窗口 尚未 打开 ， 
则 打开 一 个 共有 该 名 称 的 狐 窗 口 。 目 标 值 有 : _blank、_parent、_self 和 _top 等 。 

> “编码 类 型 ”:; 指定 对 提交 给 服务 占 进 行 处 理 的 数据 使 用 MIME 编 公 类 型 。 

默认 设置 application/x-www-form-urlencode 通 销 与 POST 方法 协同 使 用 。 如 果 要 创建 

文件 上 传 域 ， 请 指定 multipart/form-data MIME 类 型 。 


”提示 :不 要 使 用 GBT 方法 发 送 长 表单 。URL 的 长 度 限制 在 8192 个 字符 以 内 。 如果 
发 送 的 数据 量 太 大 ， 数 据 将 被 蕉 断 ， 从 而 导致 意 外 的 或 失败 的 处 理 结果 。 而 且 在 发 送 宙 密 


9.2 ”表单 对 象 


在 创建 表单 之 后 , 就 可 以 通过 表单 插入 面板 在 表单 中 插入 各 种 表单 对 象 ， 也 可 以 通过 
相应 的 菜单 在 表单 中 插入 相应 的 表单 对 象 


9.2.1 文本 字段 Single Line Text | | 


1. 插入 “文本 字段 ” Multi Line Text 四 


9-4 ”搬入 文本 域 效 果 


班 母 到 世 席 震 6 宁 
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) (CEAXB St 吕 伍 准 2 外 组 

“文本 字段 ” 即 网 页 中 的 供用 户 输入 文本 的 区 域 ， 可 以 接受 任何 类 型 的 文本 、 字 母 或 
数字 。 下 面 通过 一 个 简单 示例 介绍 在 文档 中 插入 “单行 文本 域 和 “多 行文 本 域 ” 和 “ 蜜 但 
域 ” 的 具体 操作 ， 最 终 的 创建 效果 如 图 9-4 所 示 。 

01 执行 “插入 ”|“ 表 单 ”|“ 表 单 ” 命 令 ， 或 者 单 击 “ 表 单 ” 插 入 面板 中 的 “表单 ” 
按钮 名， 添加 表单 。 

02 选中 表单 ， 执 行 “ 搬 入 ”| “表单 ”| “文本 域 ” 或 单 击 “ 表 单 ” 搬 入 面板 中 “ 文 
本 字段 ”图 标 按钮 名， 即 可 回 表 单 中 添加 一 个 文本 域 。 

03 选中 文本 域 ， 在 属性 设置 面板 的 “类 型 ” 单 选 授 钮 组 中 单 击 “单行 ”在 “初始 
值 ” 文 本 框 输入 “Single Line Text”。 

045 回 和 车 后 单 击 呈 添加 第 二 个 文本 域 ,“ 类 型 ” 单 选 按钮 组 中 单 击 “ 多 行 ” 在 “ 初 
始 值 ” 文 本 框 输入 “Multi Line Text”。 

0o 呈 回 车 后 单 击 思 添加 第 三 个 文本 域 ,“ 类 型 ” 单 选 按钮 组 中 单 击 “ 密 码 ” 在 “ 初 
始 值 ”文本 框 输入 “Password Text”。 
06 和 保存 文档 。 人 至 此 ， 文 档 创 建 完毕 。 可 以 按 下 快捷 键 F12 在 浏览 右 中 预览 整个 页 


Pr 如 果 未 创建 表单 域 ， 就 会 弹出 对 话 框 询问 是 否 要 为 表 
单 对 象 创建 一 个 表单 域 。 单 击 “Yes”， 则 添加 表单 对 象 同时 添加 表单 域 。 单 击 “No” 则 仅 
添加 表单 对 象 ， 不 添加 表单 域 。 表 单 对 象 不 在 表单 域 里 时 ， 其 对 应 的 参数 值 是 不 能 被 提交 
2.“ 文 本 字段 ”属性 
选中 “文本 字段 ” 可 以 看 见 其 属性 设置 面板 如 图 9-5 所 示 ， 文 本 域 属性 设置 面板 上 
的 各 项 属性 的 功能 分 别 介绍 如 下 : 
> “文本 域 ”: 用 于 设置 文本 域 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 表 单 对 
象 名 称 不 能 包含 空格 或 特殊 字符 ,可 以 使 用 字母 、 数 字 、 字 符 和 下 划 线 的 任意 组 
合 。 请 注意 ,为 文本 域 指定 的 标签 是 将 存储 在 该 域 的 值 (输入 的 数据 ) 的 变量 名 ， 
这 是 发 送 给 服务 器 进行 处 理 的 值 。 
尾 性 国宝 


匡 ss Er 45 类 型 中 单行 (8) ”四 多 行 各 客 码 驯 ) 类 (C) | 无 ~ 
info 行 数 5 初始 值 逻 ) 


器] 禁用 部 ) 
器 只 读 色 ) 


图 9-5 文本 域 属性 面板 
“字符 宽度 ”: 用 于 设置 文本 域 的 字符 宽度 ， 单 位 为 字符 数 或 像素 。 
“ 行 数 ”: 当 文 本 域 类 型 为 多 行 时 ， 用 于 设置 显示 的 行 数 。 
“类 型 ”: 用 于 设置 文本 域 的 类 型 。 共 有 3 种 可 以 选择 : “单行 ”， 用 于 输入 用 
户 名 、 电 子 邮 件 等 单行 信息 ; “多 行 ”, 用 于 输入 留言 、 意 见 等 内 容 较 多 的 文本 ; 
“密码 ”， 用 于 输入 密码 ， 在 密码 域 显示 * 代 替 输 入 的 内 容 。 
> “类 ”; 设置 用 于 文本 域 的 CSS 样式 。 
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> “ “初始 值 ”: 用 于 设置 文本 域 的 初始 值 。 
9. 2. 2 单 选 按钮 


1. 插入 单 选 按钮 
单 选 按钮 是 提供 给 用 户 在 众多 选项 中 选择 其 中 的 一 项 。 下 面 通过 一 个 简单 示例 介绍 在 
文档 中 插入 单 选 授 钮 组 的 其 体操 作 ， 最 终 的 创建 效果 如 图 9-6 所 示 。 
01 执行 “插入 ”|“ 表 单 ”|“ 表 和 单 ” 命 令 ， 或 者 单 击 “表单 ”面板 中 的 “表单 ” 按 
钮 申 ， 添 加 表单 。 
02 执行 “插入 ”|“ 表 单 ”| “ 单 选 按钮 组 ” 或 单 击 “ 表 单 ” 面 板 中 “ 单 选 按钮 
组 ”的 图 标 按钮 昌 ， 打 开 “ 单 选 按钮 组 ”对 话 框 ， 如 图 9-7 所 示 。 各 参数 介绍 如 下 : 
> “< 名称”， 用 于 设置 单 选 按 包 组 的 名 字 ， 
> ““ 单 选 按钮 > : 用 于 设置 单 选 按钮 的 “标签 ”和 “ 值 ”。 用户 可 以 使 用 ++、 一 | 
二 |、 二 | 按钮 对 每 个 按钮 进行 编辑 。 
> “ “布局 ， 使 用 ”: 用 于 设 定 单 选 近 钮 的 布局 方式 ， 有 两 种 选项 : “换行 符 〈<tr> 
标签 ) ”， 用 换行 符 排 版 ，“ 表 格 ”， 用 表格 排版 ， 即 Dreamweaver 创建 一 个 
单列 表 ， 并 将 这 些 单 选 按钮 放 在 左 侧 ， 将 标签 放 在 右 侧 。 


名 称 : |Radiocroupl | 
Eee SE 取消 
单 选 按钮 : 十 | [二 | [全 | lv 
在 作 下 
旅游 0 
登山 1 
游泳 2 
〇 旅游 
E 登山 布局 , 使用: 〇 换行 符 ( Gor> 标签 ) 
日 游泳 @ 表格 
图 9-6 插入 单 选 按钮 效果 图 9-7 单 选 按钮 组 对 话 框 


03 设置 单 选 按钮 组 对 话 框 中 的 参数 ， 具 体 见 图 9-7 所 示 。 单 击 “ 确 定 ” 完 成 单 选 
按钮 组 的 添加 。 

04， 选中 单 选 按钮 组 表格 ,“ 对 齐 ” 设 为 “居中 对 齐 交 “边框 ”文本 框 中 输入 1。 

0 号 保存 文档 。 至 此 ， 文 档 创 建 完 毕 。 可 以 按 下 快捷 键 F12 在 浏览 器 中 预览 整个 页 
加 

另外 也 可 以 通过 执行 “插入 ”|“ 表 单 ”| “ 单 选 按钮 ”命令 或 单 击 表单 插入 面板 中 

插入 单 选 按 钮 的 图 标 按钮 加 ,向 表单 中 添加 一 个 单 选 按钮 。 添加 单 选 按 钮 和 单 选 按 钮 组 的 
_ 区 别 在 于 后 者 成 批 搬入， 并且 提供 了 简单 排版 控制 ， 可 以 大 大 提高 编辑 效率 。 


0 
选中 单 选 按钮 ， 可 以 看 见 其 属性 议 置 面板 如 图 9-8 所 示 ， 它 包含 了 下 和 面 儿 项 属性 值 : 
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5 守 浆 阴 将 淮 实 创 妈 半 


初始 状态 O 〇 ) 已 名 选民 ) 类 @) | 无 |x| 
全 未 选中 几 ) 


图 9-8” 单 选 按钮 的 属性 设置 面板 


“ 单 选 按钮 ”: 用 于 设 症 单 选 按钮 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 
“ 选 定 值 ”: 用 于 设置 该 单 选 按钮 家 选中 时 的 值 ， 这 个 值 将 会 随 表 单 捉 交 。 
“初始 状态 ”: 用 于 设置 单 选 按钮 的 初始 状态 ， 有 “已 钩 选 ”和 “未 选中 ”两 闫 。 
同一 组 单 选 按钮 中 上 只 能 有 一 个 投 钮 的 初始 状态 被 选中 。 

> “类 ”: 用 于 设置 应 用 于 单 选 框 域 的 CSS 样式 。 


9.2.3 复 选 框 


] . 插入 66 复 选 框 ?2? 
复 选 框 供用 户 在 提供 的 多 个 选项 中 选择 其 中 的 一 项 或 多 项 。 下 面 通过 一 简单 示例 介绍 
在 文档 中 插入 复 选 按钮 组 的 具体 操作 ， 最 终 的 创建 效果 如 图 9-9 所 示 。 


Welcome 


口 其 他 人 使 用 “密码 问题 “访问 
图 9-9 插入 复 选 框 效果 


01 执行 “插入 ”|“ 表 单 ”|“ 表 单 ” 命 令 ， 或 者 单 击 插入 栏 中 表单 面板 的 量 按 钮 ， 
添加 表单 。 
02 在 表单 里 输入 “访问 权限 ”后 插入 换行 符 (Shift+Enter)。 
03 执行 “插入 ”|“ 表 单 ”|“ 复 选 框 ”或 单 击 表单 插入 面板 中 插入 复 选 按钮 的 图 标 
按钮 六 ， 即 可 向 表单 中 添加 一 个 复 选 按钮 ， 输 入 文字 “QQ 好 友 ”。 
04 重复 步骤 .03 插入 “关注 友人 ”和 “其 他 人 使 用 “密码 问题 ”访问 ”两 个 复 选 
框 。 
03 保存 文档 。 文 档 创 建 完毕 。 可 以 按 下 快捷 键 F12 在 浏览 器 中 预览 整个 页 面 。 
2. 复 选 框 属性 
选中 任 一 个 复 选 按钮 ， 其 属性 设置 面板 如 图 9-10 所 示 ， 它 包含 了 下 面 几 项 属性 值 : 
> ““ 复 选 框 名 称 ”: 用 于 设置 复 选 框 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 
> ““ 选 定 值 ”: 用 于 设置 该 复 选 框 被 选中 时 的 值 ， 这 个 值 将 会 随 表单 提交 。 
> “初始 状态 ”: 用 于 设置 复 选 框 的 初始 状态 ， 有 “已 勾 选 ”和 “未 选中 ”两 种 。 
> “ “类 ”: 用 于 设置 应 用 于 复 选 框 的 CSS 样式 。 


三 [ooo 
] Ki 复 选 框 名 称 选 定 值 O) 初始 状态 中 已 车 选 (5) 类 [(C) 


checkbox| ( 未 选中 上) 


图 9-10 ” 复 选 框 的 属性 设置 面板 
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9.2.4 文件 域 


1. 插入 “文件 域 ” 
“文件 域 ” 能够 在 网 页 中 建立 一 个 文件 地 址 的 输入 选择 栏 。 下 面 通 过 一 个 简单 示例 介 
绍 在 文档 中 插入 文件 域 的 具体 操作 ， ee 


Welcome 


访问 机 四 ， 
: 口 QQ 好 友 

: 口 关 注 友 人 

: 。 口 其 他 人 使 用 "密码 问题 -访问 

个 人 资料 EE 
3 


图 9-11 ”插入 文件 域 效果 
01 有 执行 “插入 ”| “表单 ” |“ 表单 ”命令 ， 或 者 单 击 “ 表 单 ” 面 板 中 的 “表单 ” 按 
钮 回 ， 添 加 表单 。 
02 执行 “插入 ”|“ 表 单 ”|“ 文 件 域 "”， 或 单 击 “ 表 单 ” 插 入 面板 中 的 “文件 域 ” 


图 标 按钮 加 ， 即 可 向 表单 中 添加 一 个 文件 域 。 第 
03 肯 保存 文档 。 至 此 ， 文 档 创 建 完毕 。 可 以 按 下 快捷 键 F12 在 浏览 器 中 预览 整个 页 音 

面 。 
2， 文件 域 属性 表 
选中 文件 域 ， 其 属性 设置 面板 如 图 9-12 所 示 ， 它 包含 了 下 面 几 项 属性 值 : 和 
尾 佬 国 放 翁 2 放下 es 。 
加 立 件 域名 称 字符 宽度 他) 类 总 ) 无 ”图 9 于 

info 最 多 字符 数 如 ) 区 


图 9-12 文件 域 的 属性 设置 面板 
“文件 域名 称 ”: 用 于 设置 文件 域 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 
“字符 宽度 ”: 用 于 设置 文件 域 中 最 多 可 显示 的 字符 数 ， 
“最 多 字符 数 ”: 用 于 设置 文件 域 中 最 多 可 容纳 的 字符 数 ， 
“类 ”: 用 于 设置 应 用 于 文件 域 的 CSS 样式 。 


9. 2.5 按钮 


.搬入 “按钮 ” 
a 的 按钮 对 象 是 用 于 触发 服务 占 问 脚本 处 理 程序 的 工具 。 只 有 通过 控 钮 的 触发 ， 
才能 把 用 户 填 的 信息 传送 到 服务 磊 问 去， 实现 信息 的 交互 。 下 面 通过 一 个 稍 单 示例 介绍 在 
文档 中 插入 按钮 的 其 体操 作 ， 最 终 的 创建 效 末 如 图 9-13 所 示 。 


V VvV Vv YY 


图 9-13 ”插入 按钮 效果 
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BE ET (CEAXB SP 吕 伍 准 创 :站 芭 
01 有 执行 “插入 ”| “表单 ”|“ 表 单 ”命令 ， 或 者 单 击 “ 表 单 ” 面 板 中 的 “表单 ” 按 

钮 上 四， 添加 表单 。 

02 执行 “插入 ”| “表单 |“ 按钮 ” 或 单 击 “ 表 单 ” 插入 面板 中 的 “按钮 ” 图 标 鱼 ， 
问 表 单 中 添加 三 个 按钮 。 

03 选中 第 一 个 按钮 ， 在 属性 面板 的 “动作 ” 单 选 框 中 选中 “提交 表单 ”。 

04， 选中 第 二 个 按钮 ， 在 属性 面板 的 “动作 ” 单 选 框 中 选中 “ 重 置 表单 ”。 

0 号 选中 第 三 个 按钮 ， 在 属性 面板 的 “动作 ” 单 选 框 中 选中 “无 ” 

06 保存 文档 。 人 至此， 文档 创建 完毕 。 可 以 按 下 快捷 键 F12 在 浏览 器 中 预 钨 整个 页 


面 。 

2. 按钮 属性 
选中 一 个 按钮 ， 其 属性 设置 面板 如 图 9-14 所 示 ， 它 包含 了 下 面 几 项 属性 值 : 
尾 性 同 aa Eee 一 > 


按钮 名 称 值 如) 提交 动作 ( 提交 表 单 (8) 〇 无 如 类 (C) | 无 ~ 日 
| Og 元 “站 © 


submit OO 重 设 表单 [E) 


图 9-14 按钮 的 属性 设置 面板 


> “ “按钮 名 称 ”: 用 于 设 症 按钮 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 

“标签 ”: 用 于 设置 按钮 的 标识 ， 这 将 显示 在 按钮 上 。 

> “ “动作 ”: 用 于 设置 按钮 的 动作 ， 有 3 种 选择 : “提交 表单 ”将 表单 中 的 数据 提 
交 给 表单 的 处 理 程序 ，“ 重 设 表单 ”将 表单 内 所 有 对 和 象 恢 复 到 初始 值 ， “无 ” 表 
不 无 动作 。 

> “类 ”; 用 于 设置 应 用 于 按钮 上 文字 的 CSS 样式。 


9.2.6 图 像 域 


1. 插入 “图 像 域 ” 

“图 像 域 ” 可 以 蔡 代 “提交 ”按钮 执行 将 表单 数据 提交 给 服务 占 闹 程序 的 功能 。 使 用 
图 像 按 钮 ， 可 以 使 文档 更 为 美观 。 下 面 通过 一 个 人 简单 示例 介绍 在 文档 中 插入 图 像 域 的 具体 
操作 ， 以 及 利用 图 标 代 蕉 提交 按钮 的 技术 。 最 终 的 创建 效果 如 图 9-15 所 示 。 

01 执行 “插入 ”|“ 表 单 ”| “表单 ”命令 ， 或 者 单 击 “ 表 单 ” 面 板 中 的 “表单 ” 投 
钮 马 ， 添 加 表单 。 

02 执行 “插入 ”| “表格 ”命令 插入 一 个 三 行 两 列 的 表 ， 如 图 9-16 所 示 。 


Vv 


习 Untitled Docuaent — 丰 ... 回回 因 遇 wmtitled-s (XHTHL) * 


文件 人 F) 编辑 区 ) 查看 WW) ”链接 ” 遍 


图 9-15 ”实例 效果 图 9-16 插入 表 
03 昌 在 表格 相应 位 置 输入 文本 和 文本 域 。 
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44 选中 表格 第 三 行 的 两 个 单元 格 ， 执 行 “ 修 改 ”| “表格 ”| “合并 单元 格 ” 命 

039 光标 定位 于 表格 第 三 行 的 单元 格 内 ， 执 行 “ 插 入 ”|“ 表 单 ”| “图 像 域 ” 命 
或 单 击 “表单 ”插入 面板 上 的 “图 像 域 ” 图 标 晶 ， 弹 出 “选择 图 像 ” 对 话 框 。 

09 曙 选择 一 个 需要 的 图 像 文 件 ， 单 击 “ 确 定 ” 按 钮 。 

0 此 时 大 按 F12 键 预 只 页 面 ， 将 发 现 单 击 图 像 后 页 面 没 有 变化 ， 没 有 实现 提交 表 
格 。 要 实现 提交 表格 功能 还 得 继续 下 面 的 步 又 。 

0 加 单 击 文档 窗口 顶部 的 | 车 分 按钮， 切换 到 代码 和 设计 视图 。 在 “设计 ”视图 单 
击 图 像 域 ， 这 时 在 代 人 码 视图 中 相关 的 代码 背景 色 将 显示 为 灰色 。 

093 在 图 像 域 代码 末尾 加 上 “value=Submit”， 这 时 图 像 域 代码 成 为 : <input 
name="imageField” type= Image” src="mail.gif” width= 23” helght= 10” border= 0 


value="Submit">。 

10 旨 保存 文档 。 人 至 此 ， 文 档 创 建 完毕 。 可 以 按 下 快捷 键 F12 在 浏览 器 中 预览 整个 页 
面 。 当 单 击 图 像 时 就 会 跳 转 到 表单 处 理 页 面 。 

2. 图 像 域 属性 

选中 图 像 域 的 属性 设置 面板 如 图 9-17 所 示 ， 它 包含 了 下 面 儿 项 属性 值 : 


尾 性 

飞 单 ， 图 像 区 域 ，21kK 源 交 件 (8) | . /2. gif 对 齐名 ) 默认 值 类 (C) | | 

SO "| 车 ~ 
imageF1ield 替换 代 ) 编辑 图 像 


TEST 


图 9-17 图 像 域 的 属性 设置 面板 


“图 像 区 域 ”: 用 于 设置 图 像 域 的 名 称 ,该 名 称 可 以 被 脚本 或 程序 所 引用 。 

“ 源 文件 ”: 用 于 设置 图 像 的 URL 地 址 ， 用 户 可 以 单 击 右 方 文件 夹 图 标 ， 选 择 
所 需 图 像 ， 也 可 在 文本 框 中 直接 输入 图 像 地 址 。 

“对 齐 ”: 用 于 选择 图 像 在 文档 中 的 对 齐 方式 。 

“ 蔡 换 ”: 用 于 设置 图 像 的 替换 文字 ， 当 浏览 器 不 显示 图 像 时 ， 会 以 这 里 的 文字 
蔡 换 网 像 。 

“类 ”: 用 于 设置 应 用 于 图 像 域 的 CSS 样式 。 

“编辑 图 像 ”: 月 动 默 认 的 网 像 编 辑 器 ， 并 打开 该 网 像 文件 进行 编辑 。 


9.2.7 列表 /菜单 


1. 插入 “列表 / 沫 单 ” 
“列表 / 沫 单 ” 可 以 在 网 页 中 以 列表 的 形式 为 用 户 提供 一 系列 的 预 设 选 择 项 。 下 面 通 
过 一 个 徇 单 示例 介绍 在 文档 中 插入 列表 / 流 单 的 具体 操作 , 最 终 的 创建 效果 如 图 9-18 所 示 。 


请 选择 景点 所 在 点 ， 
北京 
上 海 

请 选择 一 个 城市 | 于 江 


图 9-18 ”插入 列表 / 沫 单 效果 
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Emmyeavyar CFAXBP 站 文 股 坪 准 实 创 坡度 
01 执行 “插入 ”|“ 表 单 ”|“ 表 单 ” 命 令 ， 或 者 单 击 “ 插 入 ” 栏 中 “表单 ”面板 上 
的 “表单 ”按钮 日 ， 添 加 表单 。 

02 执行 “插入 ”|“ 表 单 ”| “列表 / 沫 单 ” 命 令 ， 或 单 击 表 单 插入 面板 的 “列表 / 荣 
单 ” 图 标 按钮 图 ， 向 表单 中 添加 一 个 “列表 /菜单 ”对 象 。 

0 这 在 属性 设置 “类 型 ” 单 选 框 选中 “ 沫 单 ” 按 钮 。 再 单 击 属性 面板 上 的 “列表 值 ? 
弹出 “列表 值 ” 对 话 框 ， 如 图 9-19 所 示 。 


图 9-19 “列表 值 ” 对 话 框 


04 昌 单 击 贞 | 按钮 添加 3 个 项 目 ,，“ 项 目标 签 ” 值 分 别 为 :西湖 、 灵 隐 寺 和 龙井 山 。 
单 击 “ 确 定 ” 完 成 列表 值 设置 。 

05 旧 向 表单 添加 第 二 个 “列表 /菜单 ”对 象 ,“ 类 型 ” 选 “ 列 表 ” 再 单 击 属性 面板 上 
“列表 值 ” 为 “列表 /菜单 ”对 象 添加 3 个 项 目 ,“ 项 目标 签 “ 值 分 别 为 : 杭州 、 苏 州 和 扬 
州 。 再 在 “初始 化 时 选 定 ” 列 表 框 中 单 击 “杭州 ”。 

06 贞 向 表单 添加 第 三 个 列表 /菜单 对 象 ,“ 类 型 ” 选 “ 列 表 ” 再 单 击 “ 列 表 值 ” 为 列 
表 / 菜 单 对 象 添 加 3 个 项 目标 签 ， 分 别 为 : 北京、 上 海 和 香港 。 再 在 “初始 化 时 选 定 ” 列 
表 框 单 击 “香港 ”，“ 高 度 ” 设 置 为 3。 

07 引 保存 文档 。 至 此 ， 文 档 创建 完毕 。 可 以 按 下 快捷 键 F12 在 浏览 器 中 预览 整个 页 
面 。 

2， 列表 /菜单 属性 

选中 一 个 列表 /菜单 对 象 , 其 属性 设置 面板 如 图 9-20 所 示 , 它 包 含 了 下 面 儿 项 属性 值 : 


尾 性 上 
上 ”列表 / 菜单 类 型 〇 菜单 山 ) 高 度 (H) 3 列表 值 ... 类 (C) 无 | 
Er- 。 二 ~ ' Es 
multi 加 列表 必 ) 选 定 范围 允许 多 选 V) 
初始 化 时 选 定 北京 
香港 


图 9-20 ”列表 / 沫 单 的 属性 设置 面板 
> “列表 /六 蛙 ”: 用 于 设 敬 “列表 /订单 ”的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引 


用 。 
> ““ 关 型 ”: ”指定 该 对 象 是 单 击 时 下 拉 的 菜单 ， 还 是 显示 一 个 列 有 项 目的 可 滚动 
列表 。 


“局 度 ”: 用 于 设置 列表 显示 的 行 数 。 
“允许 多 选 ”: 用 于 设置 是 合 允 许 选 多 项 列表 值 。 
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> “ “列表 值 ”: 用 于 设置 列表 内 容 。 单 击 此 按钮 打开 “列表 / 末 单 ”条 目 对 话 框 ， 
如 图 9-21 所 示 。 在 这 个 对 话 框 中 可 以 添加 或 修改 “列表 / 亲 单 ”的 条 目 

> “ “类”; 用 于 设置 应 用 于 “列表 / 羔 单 ”的 CSS 样式 。 

> “初始 化 时 选 定 ” 用 于 设置 “列表 /菜单 ”的 默认 选项 。 


9.2.8 跳 转 菜单 


1. 插入 “ 跳 转 荣 单 ” 

在 “表单 ”面板 中 有 一 个 跳 较 菜 和 单 的 独 标 ， 利 用 其 特性 ， 可 以 从 其 打开 的 下 拉 沫 单 中 
选择 一 个 选项 ， 跳 园 到 选择 的 沫 单项 所 链接 的 网 页 。 跳 转 菜 单 和 下 拉 荣 单 基 本 相似 ， 所 不 
同 的 是 ， 跳 转 菜单 一 般 是 用 于 选择 一 个 网 页 地 址 ， 并 在 浏览 器 中 打开 这 个 网 页 。 下 面 通过 
一 个 简单 示例 介绍 在 文档 中 插入 跳 转 沫 单 的 具体 操作 ， 最 终 的 创建 效果 如 图 9-21 所 示 。 
单 击 荣 单项 后 会 跳 转 到 相应 的 网 站 。 


图 9-21 插入 跳 转 沫 单 效果 


01 执行 “插入 ”|“ 表 单 ”| “表单 ”命令 ,或 者 单 击 “表单 ”插入 面板 上 的 “表单 ” 
按钮 上 是， 添加 表单 。 
02 执行 “插入 ”|“ 表 单 ”|“ 跳 转 菜 单 ” 命 令 ， 或 单 击 “ 表 单 ” 插 入 面板 上 的 “ 忠 
转 菜单 ”按钮 也， 会 跳出 “插入 跳 转 菜单 ”对 话 框 ， 各 参数 具体 设置 见 图 9-22 所 示 。 
“搬入 跳 转 菜单 ”对 话 框 中 各 参数 的 功能 介绍 如 下 : 
> “ “菜单 项 ”: 用 于 设置 跳 转 菜 单 的 条 目 名 称 。 用 户 可 以 使 用 | 十 、 达 |、 了 以 
钮 对 每 个 条 目 进行 编辑 。 
“文本 ”: 用 于 设置 条 目的 名 称 ， 这 将 显示 在 跳 转 菜单 中 。 
“选择 时 ， 转 到 URL”: 用 于 设置 该 条 目 所 对 应 的 超级 链接 。 
“打开 URL 于 ”; 用 于 设置 打开 链接 的 位 置 。 
“表单 D”: 用 于 设置 跳 转 菜单 的 名 称 。 
“ 深 单 之 后 插入 前 往 按钮 ”: 在 菜单 后 面 添加 “前 往 ” 按 钮 。 
“更 改 URL 后 选择 第 一 个 项 目 ”: 当 URL 改变 后 选择 第 一 个 条 目 。 
03 插入 第 二 个 跳 转 菜 单 ， 各 参数 具体 设置 见 图 9-23 所 示 。 
04 保存 文档 , 至 此 文档 创建 完毕 。 可 以 按 下 快捷 键 F12 在 浏览 器 中 预览 整个 页 面 。 
2. 中转 来 单 属 性 
选中 一 个 跳 转 菜单 对 象 ， 其 属性 设置 面板 如 图 9-24 所 示 ， 它 包含 了 下 面 几 项 属性 值 : 
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， 随 笠 天 学 : 南京 大 学 


选择 时 ， 转 到 1RL: http:// nn. tsinghua edu. cn/| ra 选择 时 ， 转 到 URL: ihttp: /wnny. nju. edu. cn 


打开 WRL 于 : | 主 窗口 加 打开 WRL 于 : | 主 窗口 


菜单 ID: |junpllenu - 菜单 ID: Er nu2 


选项 ，[] 菜单 之 后 插入 前 往 按钮 选项 : 
[更改 VRL 后 选择 第 一 个 项 目 口 更 路 URL 后 选择 第 一 个 项 目 


图 9-22 “插入 跳 转 采 蛙 ” 对 话 框 (1) 图 9-23 “插入 跳 转 末 单 ”对 话 框 (2) 


属性 es 


四 疆 / 衣 单 类 型 G) 菜单 中 3a 列表 和.， 类 (C) | 无 > 2 
jumpllenu? 列表 避 ) 洗 定 范围 | | 分 详 多 洗刷 SS 

初始 化 时 选 定 泪 江 太守 

“了 


图 9-24 ” 跳 较 菜单 属性 设置 面板 


“列表 /菜单 ”: 用 于 设置 跳 转 菜单 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 
“类 型 ”: 用 于 设置 当前 对 象 显 示 为 列表 还 是 菜单 。 当 设置 为 列表 时 ， 属 性 “高 
度 ” 和 “人 允许 多 选 ” 可 用 。 

“高 度 ”: 用 于 设置 列表 显示 的 行 数 。 

“人 允许 多 选 ”: 用 于 设置 是 否 允 许 选 多 项 列表 值 。 

“列表 值 ”: 用 于 设置 列表 内 容 。 单 击 此 按钮 打开 “列表 /菜单 ”条 目 对 话 框 ， 
如 图 9-21 所 示 。 在 这 个 对 话 框 中 可 以 添加 或 修改 “列表 / 亲 单 ”的 条 目 

“类 ”: 用 于 设置 应 用 于 “列表 /这 单 ”的 CSS 样式 。 

“初始 化 时 选 定 ”: 用 于 设置 “列表 /菜单 ”的 默认 选项 。 


9.2.9 ”隐藏 域 


.插入 “隐藏 域 ” 

i 种 在 浏览 器 上 不 显示 的 控件 , 利用 一 一 一 一 一 
“隐藏 域 ”可 以 实现 浏览 器 同 服务 器 在 后 台 隐蔽 地 交换 ~、 
信息 。“ 隐 藏 域 ”可 以 为 表单 处 理 程序 提供 一 些 有 用 的 参 
数 ， 而 这 些 参数 是 用 户 不 关心 的 , 不 必 在 浏览 器 中 显示 。 

在 文档 中 插入 “隐藏 域 ”执行 以 下 步骤 : 

(1) 执行 “插入 ”|“ 表 单 ”|“ 表 单 ” 命 令 ， 或 者 Chody> <Formtforml > DR | 国 
单 击 “ 表 单 ” 面 板 的 按钮 回 ， 添 加 表单 。 

(2) 执行 “插入 ”|“ 表 单 ”|* 隐 藏 域 ”或 单 击 “ 表 生生 生生 人生 
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单 ” 插 入 面板 上 的 “隐藏 域 ” 图 标 罗 插入 隐藏 域 ,完成 后 设计 视图 插入 一 个 占 位 符 ， 如 图 
9-25 所 示 。 

(3) 在 属性 设置 面板 中 设置 隐 茂 域 的 参数 值 。 

2. “隐藏 域 ”属性 

选中 “隐藏 域 ” 网 标 ,“ 隐 蔬 域 ”的 属性 设置 面板 如 网 9-26 所 示 。“ 了 隐藏 区 域 ” 用 于 
设置 隐藏 域 的 名 称 ， 该 名 称 可 以 被 脚本 或 程序 所 引用 ;“ 值 ”用 于 设置 隐藏 域 参 数值 ， 议 
值 将 在 提交 表单 时 传递 给 服务 器 。 

局 广 '' VA' =| 


网 隐 苛 区域 
hi ddenFieldl 值 0 


图 9-26 ”隐藏 域 的 属性 设置 面板 
9. 2. 10 ”Spry 表单 验证 构件 


在 Dreamweaver 中 , 轻 量 级 AJAX 框架 Spry 是 Adobe 推出 的 核心 布局 框架 技术 。Spry 
能 与 Dreamweaver 无 颖 地 整合 ， 应 用 了 少量 的 JavaScript 和 XML， 以 HTML 为 中 心 , 具 
有 HTML、CSS、JavaScript 基础 知识 的 用 户 束 可 以 方便 地 部 车 。 选 择 Spry 框架 ， 直 接 用 
拖拉 的 方式 即 可 完成 程序 代码 的 编写 。 

在 Dreamweaver CS6 中 ，Adobe 添加 的 表单 验证 构件 〈validation widgets) 和 用 户 界 
面 窗口 构件 (user interface widgets) 使 不 擅长 编程 的 网 页 设计 者 也 可 以 轻松 地 创建 交互 
性 强 的 炫 酷 界面 。 

下 面 通过 一 个 徐 单 示例 介绍 Spry 表单 验证 构件 的 使 用 方法 。 

0 和 全 新 建 一 个 HTML 文档 ， 并 插入 一 张 表单 。 
02 将 光标 置 于 表单 内 ， 输 入 文本 “邮箱 : ”后 ， 单 击 表单 面板 上 的 “Spry 验证 
文本 域 ” 图 标 , 插入 相应 的 构件 。 选 中 该 表单 元 素 , 在 属性 面板 中 设置 其 属性 ， 如 图 9-27 


所 未 。 
区 文本 类 型 预览 状态 
oprvtextfield 格式 ye | le ee onSubmit 
自 定 交 此 构件 图 案 最 小 宇 符 数 最 小 值 必需 的 
提示 最 大 字符 数 最大 值 口 ] 强制 恒 式 


图 9-27 Spry 验证 文本 域 的 属性 设置 面板 


03 旨 在 “类 型 ”下 拉 列 表 中 为 验证 文本 域 构件 指定 验证 类 型 ， 本 例 选择 “电子 邮 
件 地 址 ”。 如 末 文 本 域 将 接收 信用 卡 写 ， 则 可 以 指定 信用 卡 验证 类 型 。 

0 全 在 “预览 状态 ”下 拉 列 表 中 选择 构件 的 状态 ， 本 例 选 择 “ 必 填 ”。 

验证 文本 域 构件 具有 许多 状态 ， 例 如 有 效 、 无 效 和 必 填 等 。 读 者 可 以 根据 所 需 的 验 
证 结果 选择 所 需 的 状态 。 常 用 的 一 些 状态 位 要 说 明 如 下 : 

@ 初始 状态 : 在 浏 质 右 中 加 载 页 面 或 用 户 重 置 表 单 时 构件 的 状态 。 

@ 有效 状态 : 当 用 户 正 确 地 和 输入 信息 且 表 单 可 以 提交 时 构件 的 状态 。 

@ 无效 状态 : 当 用 户 所 输入 文本 的 格式 无 效 时 构件 的 状态 。 

@ 必需 状态 : 当 用 户 在 文本 域 中 没有 输入 必需 文本 时 构件 的 状态 。 
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BETmOCOYGEYET (CEA 和 下文 豚 每 难 :六 殷 
03 在 “验证 于 ”后 面 的 复 选 框 中 指定 验证 文本 域 的 时 间 ， 例 如 当 访 问 者 在 构件 
外 部 早 击 时 、 键入 内 容 时 或 尝试 提交 表单 时 。 可 以 选择 所 有 的 选项 ,也 可 以 一 个 都 不 选 ， 
其 中 : 
@ OnBlur: 当 用 户 在 文本 域 的 外 部 单 击 时 验证 。 
@ OnChange: 当 用 户 更 改 文本 域 中 的 文本 时 验证 。 
@ OnSubmit: 当 用 户 尝 试 提 交 表 单 时 验证 。 
06 按照 上 面 的 方法 插入 spry 验证 复 选 框 构件 、spry 验证 文本 区 域 构件 和 spry 验 
证 选择 构件 以 及 两 个 按钮 ， 此 时 的 页 面 布局 如 图 9-28 所 示 : 


I 000000000000000000000000000000000000000000000000000000000000000000000-0=-9 


邮箱 ， [Emm 天 要 提供 一 个 值 。 
教育 程序 ，| 小 学 图 
兴趣 爱好 ， 蓝 球 口 游泳 口 足球 口 滑冰 口 登山 


沾 人 说 明 ， 
[本 重 十 


图 9-28 页 面 布局 


07 选中 spry 验证 选择 构件 ， 在 属性 面板 中 设置 其 相关 属性 。 有 关 操 作 可 以 参见 
前 和 面 介绍 过 的 列表 /及 单 的 属性 设置 方法 。 

08 选中 spry 验证 复 选 框 构件 ， 在 属性 面板 中 指定 选择 范围 ， 选 择 “ 实 施 和 范围 ”， 
并 输入 硕 望 用 户 选 择 的 最 小 复 选 框 数 或 /和 最 大 复 选 框 数 。 

03 选中 spry 验证 文本 区 域 构件 ， 在 属性 面板 中 设置 其 预览 状态 为 “有 效 ”。 

10 呈 在 浏览 器 中 预览 ， 看 看 当 输 入 不 符合 要 求 时 会 出 现 什么 。 

此 外 ， 在 Dreamweaver CS6 中 还 有 三 个 表单 验证 构件 (validation widgets) : Spry 
验证 答 码 、Spry 验证 确认 和 Spry 验证 单 选 按钮 组 。 下 面 的 步骤 将 介绍 这 三 种 探 件 的 使 
用 方法 及 功能 

11 在 “邮箱 ”下 一 行 输入 “登录 密码 : ”， 然 后 插入 一 个 Spry 验证 密码 控件 。 
选中 该 控件 ， 在 图 9-29 所 示 的 属性 面板 上 设置 密码 中 字符 、 学 母 、 数 字 、 大 写字 母 以 及 


特殊 字符 的 个 数 范 围 。 
属性 一 一 一 一 一 一 一 一 一 
5pry 密码 回 必 卦 “最 小 字符 数 预览 状 太 | 初始 I¥ 也 
” 最 大 字符 数 J i 0 
自 定 久 此 构件 最 小 宇 母 数 最 小 数 宇 数 最 小 大 写 宇 母 数 最 小 特殊 宇 符 数 
最 玉宇 圩 数 量 太 数 宇 数 最 太 本 写 字母 数 量 坟 特殊 宇 符 煞 


图 9-29 设置 Spry 验证 密码 控件 的 属性 


若 上 述 任 一 选项 保留 为 室 ， 构 件 将 不 验证 用 户 输入 的 密码 是 否 满足 该 条 件 。 例 如 ， 
如 果 最 小 /最 大 数字 数 选 项 保留 为 空 ， 构 件 将 不 查找 密码 字符 串 中 的 数字 。 
125 另 起 一 行 ， 输 入 “确认 登录 密码 ， ”， 并 在 其 右 侧 插入 一 个 Spry 验证 确认 控 
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件 。 选 中 该 控件 ， 在 图 9-30 所 示 的 属性 面板 上 设置 该 控件 的 验证 参照 对 象 。 
.02 hh 
Er spry 确认 必 填 预览 状态 | 初始 上 | 
rn 元 证 条 照 对 四 验证 时 间 [| onBlur [| onchange ~ onsubmit 


自 定 内 此 构 性 


[a Cw) 


上 


图 9-30 ”设置 Spry 验证 确认 控件 的 属性 


分 配 了 唯一 ID 的 所 有 文本 域 都 显示 为 “验证 参照 对 象 ”下拉 列 表 中 的 选项 。 如 果 
用 户 未 能 完全 一 样 地 键入 他 们 之 前 指定 的 冤 查 ， 构 件 将 返回 错误 消息 ， 提 示 两 个 值 不 匹 
配 。 

在 这 一 步 中 ， 如 果 验 证 参照 对 和 象 为 验证 文本 域 构件 ， 则 可 以 验证 电子 邮件 地 址 。 


13 自 男 起 一 行 ， 输 入 “邮件 列表 视图 :”， 然 后 插入 一 个 Spry 验证 单 选 按钮 组 控件 。 


在 弹出 的 对 话 框 中 设置 单 选 授 钮 组 的 标签 和 值 ， 如 图 9-31 所 示 。 


Spry 验证 单 选 按 禄 组 


名 称 Radiocroup1l | 
单 选 按钮 二] [三 ] i 
忆 本 二 
签 值 
普通 模式 0 
分 组 模式 1 
会 话 模式 2 


ooooooes 


图 9-31 设置 Spry 验证 单 选 按钮 组 


14 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 之 后 ， 用 户 可 以 在 属性 面板 上 指定 验证 单 选 按 
钮 组 的 空 值 或 无 效 值 。 

在 单 选 按钮 的 属性 面板 中 为 单 选 按 钮 分 配 了 一 个 选 定 值 之 后 ， 奉 要 创建 具有 衬 值 的 
单 选 按钮 ， 则 通过 单 击 验证 单 选 按钮 组 构件 的 蓝 色 选项 卡 选择 整个 构件 之 后 ， 在 “ 选 定 
值 ” 文 本 框 中 键入 none。 奋 要 创建 具有 无 效 值 的 单 选 按钮 ， 请 在 “ 选 定 值 ” 文 本 框 中 键 
入 invalid。 

当 用 户 选 择 的 单 选 按钮 与 empty 或 invalid 关联 时 ， 指 定 的 值 也 相应 地 注册 为 
empty 或 invalid。 如 果 用 户 选 择 具 有 至 值 的 单 选 按钮 ， 则 浏览 器 将 返回 “请 进行 选择 ” 
错误 消 恩 。 如 采用 户 选 择 上 共有 无 效 值 的 蛙 选 按钮 ， 则 浏览 器 将 返回 “请 选择 一 个 有 效 值 ” 
铬 误 消 息 。 


ba 


注意 : 
2 单 选 按 钮 本 身 和 单 选 按钮 组 构件 都 必须 分 配 有 none 或 invalid 值 ， 错 


误 消 息 才 能 正确 显示 。 
15 上 比 时 的 页 面 布局 如 图 9-32 所 示 。 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 验证 效 
果 。 


173 


班 母 到 世 席 震 6 宁 


60 Jalcedg 


em 
登录 密码 ， 


将 认 登录 密码 ， 

邮件 列表 视图 ， 

人 ee 
© 若 通 模式 
和 
人 =----------------------------- 
教育 程度 ， [不 学 加 


兴趣 爱好 ， 口 蓝 球 口 游泳 口 足球 口 滑冰 口 登山 口 其 他 


| > 


二 


图 9-32 ”页面 效果 


每 当 验 证 文本 域 构件 以 用 户 交 互 方式 进入 其 中 一 种 状态 时 , Spry 框架 多 辑 会 在 运行 
时 向 该 构件 的 HTML 容器 应 用 特定 的 CSS 类 。 例 如 ， 如 果 用 户 尝 试 提交 表单 ， 但 输 
入 的 邮箱 格式 不 正确 ，Spry 会 站 该 构件 应 用 一 个 类 ， 声明 用 户 输 入 的 信息 无 效 。 用 来 控 
制 错 误 消 恩 的 样式 和 显示 状态 的 规则 包含 在 构件 随 附 的 CSS 文件 (SpryValidationText 
Field.css) 中 。 


9.3 ”表单 的 处 理 


在 文档 中 创建 表单 及 其 控件 ， 并 不 能 完成 信息 的 交互 。 要 想 在 网 页 中 实现 信息 的 真正 
交互 ， 还 必须 使 用 脚本 或 应 用 程序 来 处 理 相 应 的 信息 。 通 第 这 些 脚 本 或 应 用 程序 是 form 


标记 中 的 acion 属性 所 指定 的 。 常 用 的 脚本 Fs 
语言 有 Java、C、 VBScript、Perl 和 JavaScript ISSNGERRZTIIECIDRIEEEEE 


等 。 如 果 需 要 完成 的 操作 比较 简单 ， 可 以 将 。 | 宇和 和 Wn 


碟 无 标题 文档 


所 有 的 处 理 都 放 在 客户 问 进 行 ， 例 如 使 用 
JavaScript 脚本 处 理 一 个 简单 的 表单 。 
下 面 通 过 一 个 “个 人 资料 填写 ”网 页 
的 制作 ， 实 例 介 绍 表 单 、 各 种 表单 对 象 和 表 
格 的 联合 应 用 。 为 从 单 起 见 ， 表 单 的 处 理 采 
用 内 容 发 送 到 制作 者 邮箱 的 方法 。 采 用 
JavaScript 脚本 语言 检查 表单 数据 的 有 效 
性 。 例 中 的 表单 结构 如 图 9-33 所 示 。 
01 | 启动 Dreamweaver CS6， 创 建 一 
个 HTML 文档 。 
02 在 页 而 中 输入 标题 “个 人 资料 填写 ” 并 新 建 一 个 CSS 规则 设置 字体 、 颜 色 和 
对 齐 等 属性 。 
039 插入 一 个 表单 。 在 属性 面板 上 设置 表单 的 名 称 为 ferml， 动 作为 


图 9-33 ”网 页 中 的 表单 结构 
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mailto:vivil123@smailcom， 方 法 为 POST。 
04， 为 便于 排版 ， 在 表单 内 插入 一 个 7 行 2 列 的 表格 ， 并 在 属性 控制 面板 为 表格 设 
置 属性 “边框 ”从 为 0， 属 性 “对 章 ” 值 为 “大 中 对 齐 ” “背景 闫 色 ” 什 为 “#66CC99”。 
03 输入 图 9-35 中 的 文本 和 各 种 表单 对 象 。 各 对 象 的 参数 设置 如 下 《以 等 号 表示 相 
应 的 设置 值 ， 未 给 出 的 参数 采用 默认 值 )。 
“姓名 ”文本 域 :“ 文 本 域 ”=name;“ 字 人 符 宽 度 ”=20;“ 最 多 字符 数 ”=20;“ 类 型 ” 
二 
“ 男 ” 单 选 钮 :“ 单 选 按钮 ”=sex;“ 初 始 状态 ”=“ 已 勺 选 ” 
“ 女 ” 单 选 钮 :“ 单 选 按钮 ”=sex;“ 初 始 状态 ”=“ 未 选中 ”。 
“ 警 公 ”文本 框 :“ 文 本 域 ”=password; “字符 宽度 ”=20;“ 最 多 字符 数 ”=20;“ 头 
型 ”二 ”党 但 一 
“和 学历” 列表 框 :“ 列 表 / 环 单 ”=edu;“ 类 型 ”=“ 列 表 “列表 值 ” 设 置 如 图 9-29 
所 示 ;“ 初 始 化 选中 ”=“ 本 科 ” 
“音乐 ” 复 选 枉 :“ 复 选 枉 ”=music;“ 初 始 状态 ”=“ 未 选中 ” 
“电影 ” 复 选 枉 :“ 复 选 枉 ”=movie;“ 初 始 状态 ”=“ 未 选中 ” 
“备注 ”文本 域 :“ 文 本 域 ”=note;“ 了 字符 宽度 ”=20;“ 行 数 ”=3;“ 类 型 ”=“ 多 行 ”; 
“提交 ”按钮 :“ 标 签 ”= 提 交 ;“ 动 作 ”=“ 提 交 表 单 ”。 
“清空 ”按钮 :“ 标 签 ”= 清空 ; “动作 ”=“ 重 设 表单 ” 
制作 基本 完成 ， 可 以 保存 文档 并 在 浏览 锅 中 浏览 测试 。 当 单 击 网 页 中 的 提交 按钮 时 会 
弹出 一 个 提示 框 。 单 击 “ 确 定 ” 继 续 发 送 邮 件 ， 单 击 取消 则 不 发 送 邮 件 。 
通过 测试 会 发 现在 表单 中 没 填 任何 数据 ， 或 填 的 数据 无 效 ， 单 击 “ 提 交 ” 按 钮 后 仍然 
会 发 送 邮 件 。 这 是 网 页 设计 者 所 不 愿 看 到 的 ， 为 了 解决 这 个 问题 ， 可 以 用 JavaScript 脚本 
语言 对 表单 各 对 象 的 值 进行 有 效 性 检查 。 以 下 的 步骤 用 来 增加 这 方面 的 功能 。 
06 在 插入 栏 单 击 “ 常 用 ”标签 激活 常用 面板 ， 单 击 插 入 脚本 网 标 们 ， 弹 出 “脚本 ” 
对 话 框 。 
0 “语言 ” 选 JavaScript， 在 “内 容 ” 文 本 框 输入 JavaScript 程序 段 如 下 : 
function checkForm(){ 


if(document.form1.name.value==""){ 
alert(" 用 户 名 不 能 为 空 ! "); 


return false: 


if(document.form1.password.value==""){ 
alert(" 密 人 码 不 能 为 空 ! "); 
return false; 


return true; 
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理 导 责 证 小 莱 6 写 


下 文 投 款 玉 实 创 私 记 


08 右 击 “提交 ”按钮 ， 在 弹出 的 上 下 文 菜单 中 执行 “编辑 标签 ”命令 ， 弹 出 “ 标 
签 编 辑 器 ”对 话 杠 ， 如 图 9-34 所 示 。 


标签 编辑 器 一 input 


常规 input - 常规 
样式 表 / 辅助 功 能 
语言 


类 型 : | 提交 


名 称 : [subnit 
值 : 提交 
LL] 已 禁用 


图 9-34 “标签 编辑 器 ”对 话 框 〈1) 


09 单 击 “事件 ”前 面 的 田 按 钮 展开 事件 ， 选 中 onClick， 这 时 标签 编辑 对 话 框 右边 
出 现 Input-onClick 文本 框 。 

10 在 Input-onClick 文本 框 中 输入 事件 处 理 代码 “return checkForm()” 如 图 9-35 
所 示 然 后 单 击 “ 确 定 ” 


标 等 编辑 器 一 input 


常规 input -~ onClick 
人 
return checkForm 站 


图 9-35 “标签 编辑 器 ”对 话 框 〈2 ) 


1 各 保存 文档 ， 至 此 制作 全 部 完成 。 可 以 在 浏览 喜 中 打开 页 面 进行 测试 。 
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本 例 网 页 的 最 终 功能 有 输入 姓名 和 密码 ， 最 多 可 以 输入 20 字符 ; 当 姓 名 和 密码 两 者 
中 至 少 有 一 个 为 空 值 时 ， 单 击 “ 提 交 ” 按 钮 会 弹出 相应 的 错误 提示 对 话 框 ， 如 图 9-36 所 
示 ， 并 取消 表单 提交 。 
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/二 无 标题 文档 - Windows Internet Explorer 加 回国 


把 | C:\Inetpub\wwwroot v 好 | Xx A Live Search || 


J 
Br br 把 | C:\Inetpub\wwwroot W 
Sr 


帘 收 藏 严 | 次 加 建议 网 站 。 居 免费 lotmail 虹 ] 网 页 快讯 库 > 
大 无 标题 文档 ] 丛 - 压 无 标题 文档 


| 而-| Biox > :: Ws i sn 有 -| R100% ， .;; 


图 9-36 ”出错 提 示 对 话 框 


9.4 动手 练 一 练 


制作 一 个 图 9-37 所 示 的 “注册 登记 表 ” 网 页 。 要 求 使 用 表格 技术 实现 表单 排版 ， 其 
中 后 面 带 * 写 的 内 容 为 必 填 项 ， 提 交 表 格 时 必须 进行 有 效 性 检 醋 确保 其 不 是 空 值 。 


确认 密码 | 
别 人 @@ 男 O 女 


9-37 “注册 登记 表 ” 网 页 


9.5 思 者 题 


1. 怎样 才能 使 表单 图 像 域 对 象 起 到 提交 按钮 的 作用 ?“ 图 像 域 ”能 代替 “ 重 设 表单 
按钮 吗 ? 
2. 用 电子 邮件 方式 处 理 表单 有 哪些 优 缺 点 ? 
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班 半 于 廿 戏 内 6 导 


: “本章 将 介绍 模板 和 库 的 基本 知识 及 使 用 方法 。 内 容 包 括 : 创建 模板 ; 定 ， 
; 义 模板 的 可 编辑 区 域 、 重 复 区 域 和 可 选区 域 ; 定义 炭 套 模板 ; 应 用 模板 建立 ， 
网 页 ; 修改 模板 并 更 新 站 点 ; 库 的 创建 及 使 用 等 。 读 者 应 该 重点 掌握 模板 的 
; 创建 和 使 用 ; 可 编辑 区 域 、 重 复 区 域 和 可 选区 域 区 别 和 使 用 方法 ; 库 项 目的 
建立 和 使 用 等 内 容 。 


Adobe Dreamweaver (6 


@ 


创建 模板 与 库 
定义 模板 对 和 象 
定义 诅 套 模板 
应 用 模板 和 库 


® © © 


eT 


10.1 模板 


在 建立 并 维护 一 个 站 点 的 过 程 中 ， 往 往 需 要 建立 外 观 及 部 分 内 容 相 同 的 大 量 的 网 页 ， 
使 站 点 具有 统一 的 风格 。 如 条 逐 页 建立 、 修 改 会 很 费时 、 费 力 ， 效 率 不 局 ， 而 且 一 不 小 心 
束 出 错 ， 一 个 站 点 的 网 页 很 难 做 到 有 统一 的 外 观 及 结构 。Dreamweaver CS6 提供 了 两 种 方 
便 的 可 以 重复 使 用 的 部 件 来 解决 以 上 问题 ,这 就 是 模板 和 库 。 模板 和 库 是 最 基本 和 有 效 的 
途径 ， 同 时 也 是 保持 站 点 具有 统一 风格 的 利器 。 合 理 利 用 模板 和 库 的 功能 可 以 极 大 地 提高 
工作 效率 。 模板 提供 了 一 种 建立 同一 类 型 网 页 基本 框架 的 方法 , 在 模板 中 有 一 些 内 容 不 需 
要 修改 ， 比 如 导航 条 、 标 题 等 ， 在 创建 模板 的 时 候 ， 可 以 指定 这 些 区 域 为 固定 区 域 ， 另 外 
一 些 区 域 可 以 让 用 刀 根 据 需 要 重新 输入 内 容 ,在 创建 模板 的 时 候 ， 可 以 指定 这 些 区 域 为 可 
编辑 区 域 。 这 样 在 站 点 中 基于 这 个 模板 创建 的 文档 ， 所 有 文档 的 固定 区 域 是 相同 的 ， 而 可 
编辑 区 域 中 的 内 容 则 是 不 同 的 。 

模板 的 原理 是 由 可 编辑 区 域 和 不 可 编辑 区 域 两 部 分 组 成 , 不 可 编辑 区 域 包含 了 在 所 有 
页 面 中 共有 的 元 妹 ， 即 构成 页 面 的 基本 框架 ; 而 可 编辑 区 域 是 为 深 加 可 编辑 的 内 容 而 设置 
的 。 在 后 期 维护 中 通过 改变 模板 的 不 可 编辑 区 ， 即 构成 页 面 的 框架 部 分 ， 可 以 快速 地 更 新 
整个 站 点 中 所 有 使 用 了 模板 的 页 面 布局 。 


10. 1.1 模板 面板 


执行 “窗口 ”|“ 资 源 ” 命 令 或 按 F8 功能 键 ， 调 出 “资源 ”和 面板 ， 如 图 10-1 所 示 。 上 用 
鼠标 在 “资源 ”面板 中 单 击 “ 模 板 ” 图 标 按钮 器， 切换 到 “模板 ”面板 ， 如 图 10-2 所 示 。 


可 以 看 到 右边 上 半 部 分 显示 当前 选择 模板 的 具体 内 容 ， 下 半 部 分 则 是 所 有 人 醒 板 的 列表 。 


图 像 : 站 点 加 收藏 上 内 


量 乡 医 园 
辆 乡 图 轩 


局 El 
、 | 图 001372af60160a... 458x ee 
Rg 国 019. gif 993x: 区 
国 | 国 20080902155315... 116x El 
加 | 图 .20080912115532... S18x v Ly 
< > 
[ 括 入 ] G 苑 圳 
图 10-1 “资源 ”面板 图 10-2 “模板 ”面板 


10. 1.2 建立 模板 


在 Dreamweaver CS6 中 ,模板 是 一 种 特殊 的 文档 ， 用 于 设计 固定 的 页面 布局 。 模板 中 
有 些 区 域 是 不 能 编辑 的 ， 称 为 锁定 区 域 : 有 些 区 域 则 是 可 以 编辑 的 ， 称 为 可 编辑 区 域 。 通 
过 编辑 可 编辑 区 的 内 容 ， 可 以 得 到 与 模 极 相似 但 又 有 所 不 同 的 新 的 网 页 。 使 用 模板 创建 网 
页 的 最 大 好 处 残 古 当 修 改 模板 时 使 用 该 模板 创建 的 所 有 网 页 可 以 一 次 性 目 动 更 新 , 这 束 大 
大 提 融 了 网 页 更 新 维护 的 效率 。 
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_Diaeermeoeamaer (ESAB 让 区 舱 每 准 实 创 生 机 
模板 的 制作 方法 与 普通 网 页 类 似 , 只 是 在 制作 完成 后 应 定义 可 编辑 区 域 、 重复 区 域 等 。 
下 面 简单 介绍 创建 一 个 新 的 模板 文件 的 3 种 方法 。 
1 7 
(1) 执行 “文件 ”| 新建” 命令， 弹出 “新 建文 档 ” 对 话 框 ， 如 图 10-3 所 示 。 


| 司 


面 类 型 : 布局 : 


ae JITIL 

| 6 页 TNT 模板 1 列 固定 ,居中 

XSLT( 整 页 ) 1 列 固 定 ， 居 中 ， 标题 和 脚注 
团 | 空 模板 XSLT( 片断 1 列 液态 ， 拓 中 

1 列 液态 ， 居 中 ， 标 题 和 脚注 

2 列 固 定 ， 右 出栏 
[流体 网 格 布局 2 列 固定 ， 右 侧 栏 、 标 题 和 脚注 
2 列 固定 , 左 侧 栏 
2 列 固 定 , 左 出栏 、 标 题 和 脚注 
国 上 | 神 板 中 的 页 2 列 液态 ， 右 证 栏 
2 列 液态 ， 右 侧 栏 、 标 题 和 脚注 
2 列 液态 ， 左 侧 栏 
2 列 液态 , 左 侧 栏 、 标 题 和 脚注 
3 列 固 定 
3 列 固定 ,标题 和 脚注 
3 列 液态 
3 列 液态 ,标题 和 脚注 
HTWL5，2 列 固定 ， 右 侧 栏 、 标 题 和 脚 ; 
HTML5: 3 列 固 定 ， 标题 和 脚注 


畏 D 示例 中 的 页 


lp] 其 地 


立 档 类 型 : XHTWL 1.0 Transitional Ww 


附加 css 文件 : EE 


图 10-3 “新 建文 档 ” 对 话 框 


(2) 在 “类 别 ” 栏 选中 “ 空 柑 板 ”在 “模板 类 型 ”中 选择 需要 的 模 极 类 型 ， 在 “ 布 
局 ”中 选择 模板 的 页 面 布 局 。 单 击 “ 创 建 ” 投 钮 。 

(3) 执行 “文件 ”| ”保存 ”命令 你 存 空 模板 文件 ， 这 时 会 弹出 对 话 框 如 网 10-4 所 示 ， 
提醒 本 模板 没有 可 编辑 区 域 。 夺 选中 “不 再 冤 告 我 ” 复 选 杠 ， 那 么 下 次 保存 没有 可 编 乞 区 
域 模板 文件 时 不 再 弹出 此 对 话 框 。 


1 此 模板 涉 含有 任何 可 编辑 区 域 。 悠 想 维 续 吗 ? 


口 不 再 局 党 我 。 上 ) 


取消 


图 10-4 ”提示 对 话 框 


(4) 单 击 “ 确 定 ” 投 钮 完成 存档 。 
2 一 
(1) 在 Dreamweaver CS6 界面 中 选择 “窗口 ”| “资源 ”命令 ， 调 出 “资源 ”面板 ， 
单 击 “ 模 板 ” 图 标 按钮 图 ， 切 换 到 模板 面板 。 
(2) 单 击 “模板 ”面板 底 端的 “新 建 模 板 ” 图 标 按钮 划 ， 然 后 编辑 模板 文件 名 ， 如 
10-5 所 示 。 
(3) 保存 文件 。 一 个 人 简单 的 模板 文件 就 制作 完成 了 。 
三 
(1) 在 Dreamweaver CS6 中 打开 一 个 普通 文档 。 
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(2) 执行 “文件 ”| ” 夯 存 为 模板 ”命令 ， 弹 出 “ 妃 存 为 模板 ”对 话 框 ， 如 几 10-6 所 


下 人 人 人 人 人 人 上 上 二 
模板 


这 是 一 个 空 模板 。 项] 
基 要 开始 ， 点 二 [Y 编辑 近 让 点 .| 
钮 ， 总 加 肉 容 并 合用 性 沙 襟 单 加 


二 、 上 上 者 四 


Bl@e go 


村 ntitled-2 


图 10-5 ”编辑 模板 文件 名 图 10-6 “为 存 模 板 ” 对 话 框 


(3) 选择 你 存 模板 文件 的 站 点 ， 输 入 模板 文件 名 ， 之 后 单 击 “ 你 存 ” 完 成 模板 文件 
保存 。 

Dreamweaver 将 模板 文件 保存 在 站 点 的 本 地 根 文 件 夹 中 的 Templates 文件 夹 中 , 使 用 
文件 扩展 名 .dwt。 如 果 该 Templates 文件 夹 在 站 点 中 尚 不 存在 ，Dreamweaver 将 在 保存 
新 建 模板 时 自动 创建 该 文件 来 ,不 要 将 模板 移动 到 Templates 文件 夹 之 外 或 者 将 任何 非 模 
板 文件 放 在 Templates 文件 夹 中 ， 也 不 要 将 Templates 文件 夹 移动 到 本 地 根 文件 夹 之 外 。 
否则 ， 将 在 模板 的 路 径 中 引起 错误 。 


10.1.3 设置 模板 的 页 面 属 性 


对 模板 文件 所 做 的 任何 改动 都 将 出 现在 基于 此 模板 的 网 页 中 。 例 如 ， 如 果 打 开 了 模板 
文件 并 将 链接 颜色 更 改 为 深 粉色 ,那么 所 有 基于 此 模板 的 网 页 也 都 将 有 深 粉 色 的 链接 。 对 
于 其 他 属性 也 一 样 ， 如 网 页 标题 、 边 距 和 育 景 图 像 等 。 

在 创建 模板 时 ， 可 右 击 “ 设 计 ” 视 图 空 日 处 , 在 弹出 的 上 下 文 末 单 中 执行 “页 面 属性 ” 
命令 指定 链接 斋 色 、 网 页 标题 和 背景 图 像 等 。 


10. 1.4 定义 模板 的 可 编辑 区 域 


可 编辑 区 域 包含 了 在 根据 模板 创建 的 每 个 HTML 网 页 中 可 以 改变 的 信息 。 这 个 信息 
可 能 是 文本 、 图 像 或 其 他 的 媒体 ， 如 Flash 动画 或 Java 小 程序 。 没 有 标记 为 可 编辑 的 区 域 
在 使 用 此 模板 创建 新 文件 时 将 被 锁定 。 

当 创 建 一 个 基于 模板 的 网 页 时 ， 可 以 激活 可 编辑 区 域 并 添加 狐 的 数据 ， 然 后 将 网 页 保 
行为 独立 的 HTML 文件 。 文 件 中 没有 标记 为 可 编辑 区 域 的 域 在 所 有 基于 模板 的 网 页 中 都 
将 保持 完全 相同 的 状态 ， 并 且 不 可 以 任何 方式 进行 更 改 。 

如 果 想 要 对 模板 中 某 处 不 可 编辑 区 域 进 行 更 改 ， 必须 打开 原始 的 模板 文件 操作 。 只 要 
是 在 模板 文件 中 进行 操作 , 残 可 以 做 出 改动 。 不 过 , 如 有 果 是 对 由 模板 创建 的 页 面 进行 操作 ， 
束 不 可 更 改 没有 标记 为 可 编辑 的 域 。 牢记 , 在 模板 中 对 非 可 编辑 的 域 所 做 的 任何 更 改 都 将 
影响 站 点 中 每 一 个 基于 此 模板 的 网 页 。 

选中 可 编辑 区 域 ， 可 以 看 到 在 属性 检查 面板 中 可 编辑 区 域 只 有 一 个 属性 “名 称 ”， 在 
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rnmovaroao CO 中 交 股 每 淮 实 创 奴 市 
这 里 可 以 修改 可 编辑 区 域 的 名 称 。 


下 面 以 一 个 简单 示例 介绍 创建 一 个 新 的 模板 文件 的 具体 操作 ， 最 终 效果 如 图 10-7 所 


一 ^ 


小。 


图 10-7 ”模板 文件 效 末 


0 全 新 建 一 个 模板 文件 。 在 “设计 ”视图 中 插入 一 个 四 行 二 列 的 表格 ， 选 中 第 一 行 
单元 格 ， 单 击 属性 面板 上 的 “合并 单元 格 ” 按 钮 合并 为 一 行 ， 设 置 单 元 格 内 容 水 平和 垂直 
对 齐 方 式 均 为 “居中 ”然后 插入 一 个 一 行 五 列 的 表格 ， 输 入 导航 文本 。 

02 选中 第 一 列 中 的 第 二 行 至 第 四 行 ， 然 后 合并 ， 插 入 一 张 图 片 。 在 剩 下 的 单元 格 
中 插入 一 个 三 行 三 列表 格 ， 然 后 输入 文字 并 调整 表格 和 图 像 的 大 小 。 

03 选中 上 一 步 插 入 的 三 行 三 列表 格 。 

04 执行 “搬入 ”| “模板 对 象 ”| “可 编辑 区 域 ”命令 ， 或 单 击 “ 搬 入 ” 栏 “ 销 用 ” 
面板 上 加 -图标 中 的 下 拉 第 头 ， 在 弹出 菜单 中 单 击 回 中 3 加 菜单 项 ， 弹 出 “新 可 编辑 区 
域 ” 对 话 框 ， 如 图 10-8 所 示 。 

053 在 “名 称 ” 文 本 框 输 入 要 增加 的 新 可 编辑 区 域 的 名 字 ， 单 击 “ 确 定 ” 按 钮 ， 完 
成 在 文档 中 加 入 一 个 可 编辑 区 域 。 可 编辑 区 在 模板 文件 中 用 彩色 (默认 颜色 为 绿色 ) 高 亮 
度 显 示 ， 在 顶端 有 一 个 描述 性 的 名 字 〔 在 图 10-8 的 对 话 框 输入 )。 插 入 可 编辑 区 域 后 在 
Dreamweaver 中 的 效果 ， 如 图 10-9 所 示 。 


EditFRegion3l 
此 区 域 将 可 以 在 基于 该 模板 的 文档 
中 进行 编辑 。 


图 10-8 “新 可 编辑 区 域 ” 对 话 框 图 10-9 ”可 编辑 区 域 在 Dreamweaver 中 的 效果 
06 保存 文件 。 一 个 简单 的 模板 文件 就 制作 完成 了 。 
10. 1.5 定义 模板 的 重复 区 域 


重复 区 域 是 可 以 根据 需要 在 基于 模板 的 页 面 中 复制 任意 次 数 的 模板 部 分 。 重 复 区 域 通 
利用 于 表格 ， 但 是 也 可 以 为 其 他 页 面 元 素 定 义 重 复 区 域 。 
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重复 区 域 不 是 可 编辑 区 域 。 知 要 使 重复 区 域 中 的 内 容 可 编辑 《如 让 用 户 可 以 在 表格 单 
元 格 中 输入 文本 )， 必 须 在 重复 区 域内 插入 可 编辑 区 域 。 

(1) 在 文档 窗口 中 选择 想 要 设置 为 重复 区 域 的 文本 或 内 容 或 将 搬入 点 放 入 文档 中 想 
要 插入 重复 区 域 的 地 方 。 

(2) 创建 重复 区 域 可 以 执行 命令 “插入 ”|“ 模 
板 对 象 ”| “重复 区 域 ” 命 令 ; 也 可 以 单 击 “插入 ” 栏 
“常用 ”面板 上 加 : 图 标 中 的 下 拉 箭 头 ， 在 弹出 的 上 se | 
下 文 菜单 中 单 击 田 庆 3 攻 衣 单项 ， 还 可 以 自 标 右 击 具 吉 格 多 次 出 现在 基于 访 模板 : 
文档 窗口 , 然后 在 上 下 文 末 蛙 中 执行 命令 “模板 对 象 ” 
|“ 重 复 区域 ”命令 。 

(3) 弹 出 的 “新 建 重复 区 域 ” 对 话 框 , 如 图 10-10 
所 示 。 在 对 话 框 的 “名 称 ” 文 本 框 中 输入 新 重复 区 域 
的 唯一 的 名 称 〔 不 能 对 一 个 模板 中 的 多 个 重复 区 域 使 用 相同 的 名 称 )。 命 名 区 域 时 ， 不 要 
使 用 特殊 字符 。 

(4) 单 击 “确定 ”按钮 。 重 复 区 域 插 入 到 文档 中 。 


10. 1.6 定义 模板 的 可 选区 域 


“可 选区 域 ”是 在 模板 中 指定 为 可 选 的 部 分 , 用 于 保存 有 可 能 在 基于 模板 的 文档 中 出 
现 的 内 容 〈 如 可 选 文本 或 图 像 )。 可 将 其 设置 为 在 基于 模板 的 文档 中 显示 或 隐藏 。 当 想 为 
在 文档 中 显示 内 容 设 置 条件 时 ， 使 用 可 选区 域 。 可 以 为 模板 参数 设置 特定 值 ， 或 在 模板 中 
定义 条 件 语句 。 根 据 在 模板 中 定义 的 条 件 ， 可 以 在 创建 的 文档 中 编辑 参数 ， 并 控制 可 选区 
域 是 否 显示 。 

可 编辑 的 可 选区 域 让 模板 用 户 可 以 在 可 选区 域内 编辑 内 容 。 例如， 如 果 可 选区 域 中 包 
括 图 像 或 文本 ， 模 板 用 户 可 设置 该 内 容 是 否 显示 ， 并 根据 需要 对 该 内 容 进行 编辑 。 可 编辑 
区 域 是 由 条 件 语句 控制 的 ,可 以 在 新 建 可 选区 域 对 话 框 中 创建 模板 参数 和 表达 式 , 或 通过 
在 代码 视图 中 键入 参数 和 条 件 语句 来 创建 。 

下 面 以 一 个 示例 介绍 在 模板 文档 中 插入 可 选区 域 的 具体 步骤 : 

01 新 建 一 个 HTML 模板 文件 ,在 “设计 ”视图 中 ,插入 一 张 图 像 ， 效 果 如 图 10-11 
所 示 。 

02 选中 图 像 ， 执 行 “插入 ”| “模板 对 象 ”|“ 可 选区 域 ”命令 ， 或 单 击 “ 插 入 ” 栏 
“常用 ”面板 上 国 - 图 标 中 的 下 拉 箭头 ， 在 弹出 菜单 中 单 击 加 ED 一 ， 举 出 “新 建 可 先 
区 域 ”对 话 框 。 对 话 框 中 各 选项 介绍 如 下 

“名 称 ”: 用 于 设 定 新 可 选区 域 模板 参数 的 名 称 。 

“默认 显示 ”: 选中 该 项 则 ， 可 选区 域 默 认为 显示 ， 否 则 隐藏 。 

03 取消 选中 默认 显示 ” 即 默认 状态 下 将 要 创建 的 可 选区 域 在 网 页 中 是 不 可 见 的 ， 
“名 称 ” 采 用 默认 值 OptionalRegionl 。 单 击 “ 高 级 ”标签 ， 显 示 对 话 框 。 对 话 框 中 各 选项 
功能 介绍 如 下 ; 

“使 用 参数 ”: 用 于 设置 控制 本 可 选区 是 否 隐 藏 所 使 用 的 参数 ， 在 右边 的 下 拉 列 表 杠 
中 可 选择 要 将 所 选 内 容 链接 到 的 现 有 参数 。 


图 10-10 “新 重复 区 域 ” 对 话 框 
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“输入 表达 式 ”: 用 于 输入 控制 本 可 选区 是 否 隐 茂 所 使 用 的 表达 式 ， 表 达 式 值 为 真 ， 
显示 可 选区 ; 表达 式 值 为 假 ， 则 隐藏 可 选区 内 容 。Dreamweaver 目 动 在 输入 的 文本 两 侧 插 
入 双 3| 号 。 

04 单 击 “确定 ”按钮 ， 完 成 可 选区 的 插入 。 最 终 制 作 结果 ， 如 图 10-12 所 示 。 


If LhHNSUAGE==” Enelisk 


图 10-11 插入 图 像 图 10-12 ”实例 效果 
在 代码 区 可 以 找到 关于 可 选区 的 代码 。 模 板 参 数 在 head 部 分 定义 : 


<!-- TemplateBeginEditable name="head" -- 
<!-- TemplateEndEditable --> 
<!-- TemplateParam name="OptionalRegion1" type="boolean" value="false" --> 
在 插入 可 选区 域 的 位 置 ， 将 出 现 类 似 于 下 列 代码 的 代码 : 
<!-- TemplateBeginlf cond="OptionalRegion1" --> 
<img src="icon01.gif” width="100" height="180" /> 
<!-- TemplateEndlf --> 
从 模板 创建 的 网 页 head 区 中 也 将 插入 模板 参数 部 分 代码 。 如 果 网 页 中 需要 显示 可 选 
区 内 容 时 ， 只 需 在 网 页 文档 代码 head 部 分 找到 上 述 代 码 ， 把 其 中 的 value 值 设 置 为 true 
BJ。 
使 可 选区 域 可 编辑 的 操作 如 下 : 
(1) 在 文档 窗口 中 ， 将 光标 放 在 想 要 插入 可 选区 域 的 地 方 。 
(2) 打开 “新 可 选区 域 ” 对 话 框 ， 对 各 选项 进行 设置 。 
(3) 单 击 “ 确 定 ” 完 成 插入 可 选区 域 。 
(4) 把 光标 定位 于 可 选区 域内 部 插入 可 编辑 区 。 
可 选区 域内 的 编辑 区 和 可 选区 一 样 显示 和 隐 藏 。 当 可 选区 隐 震 时 因为 看 不 到 它 ， 内 部 
的 可 编辑 区 是 不 可 编辑 。 
另外 ， 可 直接 单 击 “ 插 入 ” 栏 “ 常 用 ”面板 加 * 图 标 中 的 下 拉 箭头 ， 在 弹出 菜单 中 单 
而 员 可 编辑 的 可 这 区 域 搬入 “可 编辑 的 可 选区 域 ” 


OL JS}QBUD 


。 檬 不: 不 能 环 统 选 定 内 容 来 创建 可 编辑 的 可 选区 域 。 应 插入 区 域 ， 然 后 在 该 区 域 
内 插入 内 容 ， \ 
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10.1.7 修改 可 选区 域 


在 模板 中 插入 可 选区 域 之 后 ， 可 以 编辑 该 区 域 的 设 莉 。 例如， 可 以 对 是 人 盏 显 示 内 容 献 
认 值 的 设置 进行 更 改 ， 将 参数 链接 到 现 有 可 选区 域 , 或 者 修改 模板 表达 式 。 要 修改 可 选区 
域 ， 可 以 重新 打开 “新 建 可 选区 域 ” 对 话 框 。 

(1) 如 末 属 性 检查 左 尚 未 打开 ， 执 行 “ 窗 口 ”| “属性 ”命令 将 其 打开 。 

(2) 在 “设计 ”视图 中 ， 单 击 想 要 修改 的 可 编辑 区 域 的 模板 选项 卡 ， 或 在 “设计 ” 
视图 中 , 早 击 模板 区 域内 的 内 容 ， 然 后 在 标签 选择 右 中 早 击 模板 标记 <mmtemplate:if>。 还 
可 以 在 “代码 ”视图 中 ， 单 击 想 要 修改 的 模板 区 域 的 注释 标记 。 

(3) 在 属性 检查 需 中 单 击 “ 编 辑 ” 按 钮 ， 弹 出 “新 建 可 选区 域 ” 对 话 框 。 

(4) 进行 修改 ， 然 后 单 击 “ 确 定 ” 鬼 钮 。 


10. 1.8 定义 通 套 模板 


骸 套 模板 是 指 其 设计 和 制作 是 基于 为 一 个 模板 的 模板 。 硅 要 创建 授 傣 模板 ,必须 站 先 
保存 原始 模板 或 基本 模板 ,然后 基于 该 模板 创建 新 文档 ， 最 后 将 该 文档 另存 为 模板 。 在 新 
模板 中 ， 可 以 在 原来 基本 模板 中 定义 为 可 编辑 的 区 域 中 进一步 定义 可 编辑 区 域 。 

垦 套 模板 对 于 控制 共享 许多 设计 元 素 的 站 点 页 面 中 的 内 容 很 有 用 , 但 在 各 页 之 间 的 作 
用 有 些 差 民 。 例 如 ， 基 本 模板 中 可 能 包含 更 宽广 的 设计 区 域 ， 并 且 可 以 由 站 点 的 许多 内 容 
提供 者 使 用 ， 而 花 套 模板 可 能 进一步 定义 站 点 内 特定 部 分 页 面 中 的 可 编辑 区 域 。 

基本 模板 中 的 可 编辑 区 域 被 传递 到 散 套 模板 , 并 在 根据 散 套 模板 创建 的 页 面 中 保持 可 
编辑 ， 除 非 在 这 些 区 域 中 插入 了 新 的 模板 区 域 。 

对 基本 模板 所 做 的 更 改 在 基于 基本 模板 的 模板 中 目 动 更 新, 并 在 所 有 基于 主 模 板 和 藤 
套 模板 的 文档 中 上 自动 更 新 。 

可 以 通过 保存 一 个 基于 模板 的 文档 , 然后 创建 该 文档 的 新 模板 来 创建 钥 套 模板 。 通 过 
藤 套 模板 可 以 创建 基本 模板 的 变 体 。 可 以 组 套 多 个 模板 来 定义 更 加 精确 的 布局 。 

从 想 要 作为 散人 套 模 板 的 基础 模板 创建 一 个 文档 ， 操 作 方 法 为 下 列 之 一 : 

(1) 在 “资源 ”面板 的 “模板 ”类 别 中 右 击 想 要 从 其 创建 新 文档 的 模板 ， 然 后 执行 
“从 模板 狐 建 ”命令 ， 如 图 10-13 所 示 。 


| = ES 


重建 站 点 列表 
新 建 模板 他 ) 


已 四 Il@ 邓 二 不 多 图 因 


站 点 : | 5 
从 模板 新 建 代 ) 
现存 的 模板 : [i 


图 10-13 右 击 模板 弹出 的 上 下 文 染 单 图 10-14 “为 存 为 模 极 ”对话 框 
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(2) 执行 “文件 ”|“ 新 建 ” 命 令 。 在 “新建 文档 ”对 话 框 中 ， 单 击 “ 模 板 ” 选 项 卡 ， 
并 选择 包含 想 要 使 用 模板 的 站 点 ,然后 在 文档 列表 中 双击 该 模板 以 创建 新 文档 。 文 档 窗口 


中 即 会 出 现 一 个 狐 文 档 。 


(3) 执行 “文件 ”| “另存 为 模板 ”命令 ， 或 单 击 “插入 ” 栏 “ 常 用 ”面板 上 图" 图 


标 中 的 下 拉 箭头 , 在 弹出 菜单 中 单 击 目 由 
所 示 。 输 入 名 字 后 单 击 “ 保 存 ” 保 存 文档 。 


, 弹出 “另存 为 模板 ”对 话 框 , 如 图 10-14 


在 基于 秽 套 模 板 的 文档 中 ， 可 以 添加 或 更 改 从 基本 模板 传递 的 可 编辑 区 域 《 以 及 在 新 


模板 中 创建 的 可 编辑 区 域 中 的 内 容 。 
10.1 9 应 用 模板 建立 网 页 


在 本 地 站 点 中 创建 模板 的 主要 目的 是 在 本 地 站 点 中 使 用 这 个 模板 创建 具有 相同 外 观 


及 部 分 内 容 相同 的 文档 ， 使 站 点 保持 风格 统一 
直接 使 用 模板 建立 网 页 ， 执 行 以 下 操作 : 


(1) 执行 “文件 ”| 新建” 命令 ， 打 开 “ 独 建文 要 ”对 话 框 。 


(2) 在 该 对 话 框 中 选择 “模板 ”标签 ， 从 左边 的 站 氮 列表 中 选择 一 个 站 点 ， 在 模板 


列表 中 选择 创建 的 模板 。 然 后 单 击 选择 “ 当 模 板 改 变 时 更 新 页面” 复 选 框 。 
(3) 单 击 新 建文 档 对 话 框 中 的 “创建 ”按钮 ， 创 建 一 个 新 文档 。 


(4) 对 新 文档 进行 编辑 。 
另外 还 可 以 直接 右 击 模板 管理 面板 中 需要 的 模板 文件 ， 然 后 
在 弹出 上 下 有 亲 蛙 中 执行 “从 模板 狐 建 ”命令 ， 如 图 10-15 所 示 。 


修改 模板 并 更 新 站 所 


如 果 对 当前 站 点 中 使 用 的 模板 进行 了 修改 ，Dreamweaver 
CS6 会 提示 是 否 修改 应 用 该 模板 的 所 有 网 页 。 也 可 以 通过 命令 手 
动 修改 当前 页 面 或 整个 站 点 。 

修改 模板 并 更 新 站 点 的 具体 操作 步骤 如 下 : 

(1) 执行 “文件 ”| “ 新建” 命令， 打开 “新 建文 要 ”对 话 
框 。 在 该 对 话 框 中 选择 “模板 ”标签 ， 从 左边 的 站 点 列表 中 选择 
保存 刚才 创建 的 模板 的 站 点 ,在 模板 列表 中 双击 当前 文档 使 用 的 
模板 ， 打 开 模 板 编 辑 窗口 ; 或 执行 “窗口 ”|“ 资 源 ” 命 令 ， 调 出 
“资源 ”面板 。 使 用 鼠标 在 “资源 ”面板 中 单 击 “模板 ”图 标 按 
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辆 乡 图 网上 


[= : A 
大 ”mt 刷新 站 点 列表 @B) | 
重建 站 点 列表 


民 加 | 人 区 


新 建 模 板 岂 ) 
编辑 曲 


更 新 站 点 邓 ).. . 


《 复制 到 站 点 已) ?， 
在 站 点 定位 (L) 


图 10-15 ”从 模板 创建 网 页 


钮 蜀 ， 切 换 到 “模板 ”面板 ， 在 模板 列表 中 双击 当前 文档 使 用 的 模板 ， 也 会 打开 模板 编 


HB. 3 


辑 窗 口 。 


(2) 在 模板 编辑 窗口 中 ， 对 模板 进行 修改 。 修 改 完 成 后 ， 执 行 “修改 ”|“ 柑 板 ”| 
“更 新 页 面 ”命令 ， 则 会 出 现 “ 更 新 页 耐 ”对 话 框 ， 如 图 10-16 所 示 。 

(3) 在 该 对 话 框 中 的 “但 看 ”下 拉 列 表 框 中 ， 选 择 “ 整 个 站 点 ”选项 ， 然 后 在 后 面 
的 站 点 下 拉 列 表 框 中 选择 站 点 名 ， 在 “更 莉 ” 后 面 的 复 选 框 中 选择 “模板 ”。 

(4) 单 击 “ 开 始 ” 投 钮 ， 即 可 将 模板 的 更 改 应 用 到 站 点 中 使 用 该 模板 的 网 页 。 在 “ 状 
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态 ” 栏 将 显示 更 狐 的 成 功 或 失败 等 信息 。 


查看 (0): En Vv | | +t:t v 
更 新 : 口 库 项 目 


四 模板 上) 


器] 显示 记录 0) 
状态 : 


图 10-16 “更 痢 页 面 ”对 话 框 


10.2 库 


在 站 点 中 除了 上 其 有 相同 外 观 的 许多 页 面 外 ， 还 有 一 些 需 要 经 第 更 新 的 页 面 元 聚 ,例如 
版 权 声 明 、 站 氮 导 航 条 。 这 些 内 容 与 便 板 不 同 ， 它 们 上 只 是 页 面 中 的 一 小 部 分 ， 在 各 个 页 面 
中 的 摆 放 位 置 可 能 不 同 ， 但 内 容 却 是 一 致 的 。 可 以 将 此 种 内 容 保存 为 一 个 库 文 件 ， 在 需要 
的 地 方 插 入 ， 在 裔 要 时 快速 更 狐 。 

库 与 模板 的 作用 一 样 ， 也 是 一 种 你 证 网 页 中 的 部 件 能 够 重复 使 用 的 工具 。 模板 重复 使 
用 的 是 网 页 的 一 部 分 结构 ， 而 库 则 提供 了 一 种 重复 使 用 网 页 对 象 的 方法 。 


10.2. 1 建立 及 使 用 库 项 目 


1. 创建 库 项 目 

库 是 一 种 特殊 的 Dreamweaver 文件 , 其 中 包含 已 创建 以 便 放 在 Web 页 上 的 单独 的 资 
源 或 资源 副本 的 集合 ， 如 图 像 、 表 格 、 声 音 和 Flash 文件 等 。 库 里 的 这 些 资 源 称 为 库 项 
加 

创建 的 库 项 目 保 存在 当前 站 点 的 Library 文件 夹 中 。 站 点 中 所 有 的 库 项 目 都 是 储存 在 
Library 文件 夹 中 的 ， 以 .Ibi 作为 扩展 名 。 

和 模板 一 样 ， 库 项 目 应 该 始终 在 Library 文件 夹 中 ， 并 且 不 应 回访 文件 夹 中 添加 任何 
非 .lbi 的 文件 。Dreamweaver 需要 在 网 页 中 建立 来 目 每 一 个 库 项 目的 相对 链接 。 这 样 做 ， 
必须 确切 地 知道 原始 库 项 目的 存储 位 置 。 

对 于 链接 项 (如 图 像 )， 库 只 存储 对 该 项 的 引用 。 原 始 文 件 必须 保留 在 指定 的 位 置 ， 
才能 使 库 项 目 正确 工作 。 尽 管 如 此 ， 在 库 项 目 中 存储 网 像 还 是 很 有 用 的 。 例 如 ， 可 以 在 库 
项 目 中 存储 一 个 完整 的 <img> 标 记 ， 以 方便 地 在 整个 站 点 中 更 改 图 像 的 alt 文本 ， 其 至 更 
改 它 的 src 属性 。 但 是 ， 不 要 使 用 这 种 方法 更 改 图 像 的 width 和 height 属性 ， 除 非 还 使 用 
图 像 编 辑 右 来 更 改 图 像 的 实际 大 小 。 

创建 库 项 目 操作 步骤 如 下 : 

(1) 选中 文档 中 需要 保存 为 库 项 目的 部 分 。 

(2) 执行 “窗口 ”|“ 资 源 ” 命 令 ， 在 “资源 ”面板 上 单 击 “ 库 ”图 标 蜗 ， 打 开 库 管 
理 和 面板 。 

(3) 单 击 资源 管理 面板 上 的 “新 建 库 项 目 ” 图 标 划 ，。 

(4) 输入 狐 的 库 项 目的 名 称 。 
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poemmuyaevyar COB 守 妆 股 保 准 实 创 求 在 

这 时 该 库 项 目 对 象 将 出 现在 “ “资源 ” ee “ 库 ” 列 表 中 。 此 外 ， 还 有 更 简便 的 创建 
库 项 目 方法 ， 只 要 在 文档 中 把 选中 的 内 容 拖 到 库 面板 中 ， 并 为 其 命名 束 完 成 了 。 

2. 使 用 库 项 目 

当 问 页 面 添加 库 项 目 时 ， 将 把 实际 内 容 以 及 对 该 库 项 目的 引用 一 起 插入 到 文档 中 。 要 
在 文档 中 应 用 创建 好 的 库 项 目 ， 执 行 如 下 操作 : 

(1) 将 插入 点 定位 在 文档 窗口 中 要 放 入 库 项 目的 位 置 。 

(2) 打开 库 管 理 面 板 ， 从 库 项 目 面板 上 的 库 项 目 列表 中 选择 要 插入 的 库 项 目 。 

(3) 单 击 库 项 目 面板 上 的 蕊 锤 w_ | 按钮 ,或 是 将 库 项 目 从 库 面板 中 拖 到 文档 窗口 即 可 ， 
这 时 文档 中 会 出 现 库 项 目 所 包含 的 文档 内 容 ， 同 时 以 失 芮 色 高 完 显 示 ， 表 明 它 是 一 个 库 项 
目 。 

在 文档 窗口 中 ,， 库 项 目 是 作为 一 个 整体 出 现 的 ， 用 户 无 法 对 库 项 目 中 的 局 部 内 容 进 行 
编辑 。 如 果 硕 望 仅仅 添加 库 项 目 内容 代 码 而 不 希望 它 作 为 库 项 目 出 现 ， 可 以 投 住 Ctrl 键 ， 
将 相应 的 库 项 目 插入 文档 中 。 


10. 2.2 库 面 板 


执行 “窗口 ”| “资源 ”命令 ， 调 出 “资源 ”面板 。 在 “资源 ”面板 中 单 击 “ 库 ” 图 
标 按 钮 出， 切换 到 “ 库 ” 面 板 ， 如 图 10-17 所 示 。 


图 10-17 “ 库 ” 面 板 


该 面板 分 为 两 部 分 : 上 半 部 分 显示 当前 选择 库 项 目的 具体 内 容 ; 下 半 部 分 则 是 所 有 库 
项 目的 列表 。 

在 “ 库 ” 面 板 里 ， 可 以 方便 地 进行 库 项 目的 创建 、 删 除 和 改名 等 操作 。 

在 文档 窗口 中 选择 一 个 库 项 目 后 ， 选 择 “ 窗 口 ”| “属性 ”命令 ， 调 出 属性 设置 面板 ， 
如 图 10-18 所 示 。 访 面板 中 几 个 主要 选项 的 功能 介绍 如 下 : 


库 项 目 源 六 JjLibrary/topbar. 1bi 从 源 立 件 中 分 离 加 
全 由 一 多 
a 重新 创 哇 区 


图 10-18 库 项 目的 属性 面板 


打开 |， 单 击 该 按钮 会 打开 “ 库 ” 面 板 ， 方 便 用 户 对 所 选择 的 库 项 目 进行 再 编辑 。 
| 业 源 立 件 中 苍 离 _ |: 该 按钮 的 作用 是 将 当前 选择 的 内 容 从 库 项 目 中 分 离 出 来 ， 这 样 可 
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以 对 插入 到 文档 窗口 中 的 库 项 目 进行 修改 。 但 是 在 以 后 对 库 项 目 进行 修改 时 ， 不 会 更 改 该 
网 页 的 库 项 目 。 在 使 用 该 功能 时 ， 会 弹出 一 个 对 话 框 提示 对 以 后 的 影响 ， 如 图 10-19 所 
示 。 如 来 单 击 “确定 ”按钮 ， 则 确认 操作 ， 将 当前 选择 的 内 容 从 库 项 目 中 分 离 出 来 ， 如 来 
选择 “取消 ”按钮 ， 则 取消 操作 。 

| ”重新 包 建 :该 按钮 的 功能 是 通过 文档 窗口 中 以 前 使 用 库 项 目 插入 的 内 容重 新 
生成 库 项 目 文件 。 一 般 在 库 项 目 文件 被 删除 时 ， 使 用 该 功能 恢复 以 前 的 库 项 目 文件 。 使 用 
该 功能 时 ， 会 显示 一 个 对 话 框 ， 如 图 10-20 所 示 ， 提 醒 是 否 将 原来 的 库 项 目 文 件 弛 病 。 


Dreanveaver 


如 果 把 本 项 目 变 成 可 编辑 , 当 源 立 件 被 改变 时 ， 它 
企 将 下 会 自动 喝 新 


Dreanveaver 


2 覆盖 现存 库 项 目 吗 ? 


器] 和 不 再 本 肯 我 。 闻 ) 


取消 取消 


图 10-19 ”提示 对 话 框 (1) 图 10-20 ”提示 对 话 框 (2) 


如 末 是 重建 原来 没有 的 库 项 目 ， 重建 后 库 项 目 个 会 立即 出 现在 “ 库 ” 和 面板 中 。 可 以 石 
击 “ 库 ”和 面板 ， 在 弹出 的 快捷 末 早 中 执行 “刷新 站 点 列表 ”命令 ， 如 图 10-21 所 示 。 这 
样 丈 可 以 在 “ 库 ” 面 板 中 显示 重建 的 库 项 目 了 。 
新 建 库 项 W) 
编辑 灾 ) 


重 命 名 伞 ) 
册 除 种 ) 
更 新 当前 页 0 
更 新 站 点 (F)... 


复制 到 站 点 人 ) 
在 站 点 定位 代 ) 


图 10-21 右 击 “ 库 ” 面 板 弹出 沫 单 


10.2.3 操作 库 项 目 


更 改 库 项 目 时 ， 可 以 选择 更 独 使 用 该 项 目的 所 有 文档 。 如 果 选 择 不 更 狐 ， 那 么 文档 将 
保持 与 库 项 目的 关联 ， 可 在 以 后 执行 “修改 ”|“ 库 项 目 ”| “更 新 页 面 ” 命 令 来 更 新 它们 。 
对 库 项 目的 其 他 种 类 的 更 改 包 括 : 重 命 名 项 目 以 断 开 其 与 文档 或 模板 的 连接 ， 从 站 氮 
的 库 中 删除 项 目 ， 以 及 重新 创建 丢失 的 库 项 目 。 
1. 编辑 库 项 目 
(1) 执行 “窗口 ” | “资源 ”命令 ， 在 “资源 ”面板 上 单 击 “ 库 ” 图 标 晤 ， 打 开 资 源 
管理 面板 库 关 别 。 
(2) 选择 库 项 目 。 库 项 目的 预览 出 现在 资源 面板 项 部， 但 不 能 在 预 虎 中 进行 任何 编 
Fs 
(3) 单 击 “ 库 ”面板 底部 的 “编辑 ”按钮 展 |， 或 者 双击 库 项 目 。Dreamweaver 将 打 
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BBE (CEAXB 区 人 隆 课 站 党 亿 法度 
开 一 个 用 于 编辑 该 库 项 目的 新 窗口 ， 此 窗口 类 似 于 文档 窗口 。 
(4) 编辑 库 项 目 ， 然 后 保存 更 改 。 


加 提示 :六 加 内 项 目 时 ，08S 衬 到 面板 不 可 用 ， 因 为 亩 项 目 中 只 能 包 他 body 元 于 
CSS 样式 表 代码 却 可 以 插入 到 文档 的 head 部 分 。“ 页 面 属性 ”对 话 框 也 不 可 用 ， 因 为 库 项 
' 目 中 不 能 包含 body 标记 或 其 属性 。 
2. 更 狐 站 点 
更 新 整个 站 点 或 所 有 使 用 特定 库 项 目 文档 的 操作 步骤 如 下 : 
(1) 执行 “修改 ”|“ 库 ”|“ 更 新 页 面 ” 命 令 ， 出 现 “ 更 新 页 面 ” 对 话 框 ， 如 图 10-22 
所 示 。 
(2) 在 该 对 话 框 中 的 “查看 ”下 拉 列 表 框 中 ， 选 择 “ 整 个 站 点 ”选项 ， 然 后 在 后 面 
的 站 点 下 拉 列 表 框 中 选择 站 点 名 ， 在 “更 新 ”后 面 的 复 选 框 中 选择 “ 库 项 目 ”。 
(3) 单 击 “开始 ”按钮 ， 即 可 将 库 项 目的 更 改 应 用 到 站 点 中 使 用 该 库 项 目的 网 页 。 
3. 重 命名 库 项 目 
(1) 单 击 库 项 目的 名 称 以 将 其 选中 。 
(2) 稍 作 暂停 之 后 ， 再 次 单 击 。 注 意 : 不 要 双击 名 称 ， 那 样 将 打开 库 项 目 进行 编辑 。 
(3) 当 名 称 变 为 可 编辑 时 ， 输 入 一 个 新 名 称 。 
(4) 在 文档 空白 处 单 击 ， 或 者 按 Enter 键 。 
重 命 名 库 项 目 ， 实 际 上 就 是 对 本 地 站 点 的 Library 目录 中 的 该 文件 重合 名 。 因 此， 也 
可 以 直接 重 命名 相应 的 库 项 目 文件 。 
4. 删除 库 项 目 
(1) 在 “ 库 ” 面 板 的 库 类 别 中 选择 要 删除 的 项 目 。 
(2) 单 击 “ 删 除 ” 按 钮 画 弹 出 询问 删除 对 话 框 ， 如 图 10-23 所 示 。 单 击 “ 是 ”删除 
该 项 目 。 


查看 (0): ESIETEB test 
Wf: 回 时 硕 目 中 


口 模板 (7) 2 您 确认 要 删除 ' topbar’ 吗 ? 


器 显示 记录 (0) 
状态 : 


是 (7) 天 QH) 


图 10-22 “更 新 页 向 ”对 话 框 图 10-23 ”所 示 对 话 框 


删除 库 项 目 ， 实际 上 就 是 从 本 地 站 点 的 Library 目录 中 删除 相应 的 库 项 目 文件 。 因 此 ， 
也 可 以 直接 删除 相应 的 库 项 目 文件 。 


Ol JS}QBUD 


提示 :和 i 除 一 个 库 项 目 后 ， 将 无 法 使 用 “撤消 ”来 找 回 它 。 但 可 以 重新 创建 它 ， 
如 下 一 过 程 所 述 .删除 库 项 目 时 将 从 库 中 删除 该 项 目 , 但 不 会 更 改 任何 使 用 该 项 目的 内 容 。 
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10. 3 模板 与 库 的 应 用 


下 面 通过 一 个 示例 说 明 如 何在 网 页 中 建立 并 使 用 库 项 目 ， 本 例 的 最 终 效 末 如 图 10-24 
所 示 。 将 鼠标 移 到 导航 文本 《例如 “ 定 风流 ”上 时 ， 文 本 显示 为 橙色 ， 单 击 导 航 文 本 ， 
则 跳 转 到 相应 的 页 面 。 


神 永 名 作 


雨 者 铃 夜半 乐 定 风 波 鹤 神 天 


案 星 于 切 ,对 长 享 晚 ， 又 十 和 初 融 。 
都 门 幅 饮 无 竺 ， 
留恋 处 、 兰 身 偿 发 。 

执 手 相 看 泪眼 ， 竟 无 语 波 喷 。 
念 去 去 、 千 里 烟波 ， 

兽 鹤 沉沉 楚 天 阅 。 


订 
-本 8 
经 年 ， 让 是 良 展 、 冯 景 庶 设 。 
有 、 千 种 风情 ， 
何人 说 。 


版 权 所 有 Copyrieht ComeySoft 2012 
建议 使 用 浏览 器 下 5.0 以 上 .屏幕 分 辨 率 1024x768 
Emailwebrmaster(@163.com 


图 10-24 ”实例 效果 


01 有 启动 Dreamweaver CS6， 新 建 一 个 HTML 模板 文件 。 在 页 面 中 插入 一 个 三 行 一 
列 的 表格 ， 表 格 宽度 为 600 像素 ， 边 框 粗细 为 0。 

02 自 选中 表格 ,在 属性 面板 上 的 “对 齐 ” 下 拉 列 表 中 选择 “居中 对 齐 ”。 将 光标 定位 
在 第 一 行 的 单元 格 中 ， 在 属性 面板 上 设置 单元 格 内 容 水 平和 垂直 对 齐 方式 均 为 “居中 ”， 
“高 度 ” 为 100， 然 后 输入 文本 “ 柳 永 名 作 ” 选中 输入 的 文本 ， 单 击 属 性 面板 上 的 “ 编 
辑 规则 ”按钮 ， 设 置 选 择 右 关 型 为 “类 ”， 选 择 器 名 称 为 .STYLE1， 单 击 “ 人 确定” 按钮 打 
开 规 则 定义 对 话 框 , 在 “类 型 ”分 类 中 指定 字体 为 “华文 行 档 ” 大 小 为 48, 颜色 为 要 3CCFF， 
单 击 “人 确定 ”按钮 关闭 对 话 框 。 

03 将 光标 定位 在 第 二 行 单元 格 中 ， 单 击 “ 折 分 单元 格 ” 按 钮 三 ， 将 单元 格 拆 分 为 
4 列 。 选 中 拆 分 后 的 单元 格 ， 设 并 单元 格 内 容 水 平和 和 敢 朋 对 齐 方式 均 为 “大 中 ”然后 在 
单元 格 中 输入 导航 文本 。 

为 了 便于 控制 对 章 格式 ， 词 的 内 容 部 分 放 在 一 个 两 行 一 列 的 表格 内 。 
045 将 光标 定位 在 第 三 行 单元 格 中 ， 设 置 单元 格 内 容 水 平 对 齐 方式 为 “居中 对 齐 ” 
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emuYyenvyar (ASP 让 文 役 系 准 袜 创 息 老 
垂直 对 齐 方式 为 “顶端 ” 然后 在 单元 格 中 搬入 一 个 两 行 一 列 的 表格 ， 表 格 宽度 为 600 像 
素 ， 边 框 粗细 为 0。 

03 将 光标 定位 在 藤 套 表格 的 第 一 行 ， 设 置 单元 格 内 容 水 平 对 齐 方式 和 垂直 对 齐 方 
式 均 为 “ 届 中 网 “高 ”为 S0， 然 后 输入 文本 “ 雨 霖 铃 ” 选中 文本 ， 新 建 一 个 CSS 规则 ， 
选择 器 类 型 为 “类 ”, 选择 器 名 称 为 “.STYLE2”, 在 规则 定义 对 话 框 中 指定 文本 字体 为 “ 隶 
书 ” 大 小 为 36。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 

06 将 光标 定位 在 组 套 表 格 的 第 二 行 ， 设 置 单元 格 内 容 水 平 对 章 方 式 为 “ 左 对 痢 ”， 
垂直 对 齐 方式 为 “顶端 ” 然后 输入 诗词 文本 。 选 中 文本 ， 单 击 “ 编 辑 规则 ”按钮 新 建 一 
个 CSS 规则 ， 选 择 器 类 型 为 “类 ” 选择 器 名 称 为 “.STYLE3” 在 规则 定义 对 话 框 中 指定 
文本 字体 为 “华文 行 楷 ” 大 小 为 24。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 此 时 的 页 面 效果 如 
10-25 所 示 。 


雨 琳 铃 夜半 乐 定 风波 窟 冲天 
~ 乓 寄 铃 i 
PY WR 
门 幅 饮 无 竺 ， 
杰 处 、 身 俊 发 。 
看 中 ， 竟 元 车 滞 嘻 0 
里 烟波 ， 


高 学 窟 人 辽 书 允 内 了 
KS 


暗 风 焉 月 。 
年 ， 冰 是 区 展 、 闯 灌 虑 设 。 
、 生 种 风情 ， 


本 二 以 - 全 个 


等 双 涩 村 
长 洒 可 访 百 次 冰 全 六 条 后 


poe ee ee ee er en ene ee ene ee eee ee eee nee eee ee een ee Ee 
AN 了 
ww Ws 2 油 
< pp 
LN 所 


车 
[= 
Iw 


NNN 


图 10-25 ”实例 效果 
07 旧 选中 页 面 中 导航 文本 以 下 部 分 , 即 撕 套 表格 。 单 击 “ 插 入 ” 栏 “ 常 用 ”面板 上 加 
图 标 中 的 下 拉 箭 头 ， 在 弹出 菜单 中 单 击 名 按钮 。 弹 出 提示 对 话 框 如 图 10-26 所 示 ， 提 示 将 
一 了 目 动 把 文档 转 为 模板 文件 。 
08 单 击 “确定 ”按钮 ， 弹出 “新 建 可 编辑 区 域 ”对 话 框 ， 如 图 10-27 所 示 。“ 名 称 ” 
设置 为 content， 单 击 “ 人 确定 ”按钮 ， 插 入 可 编辑 区 域 ， 如 图 10-28 所 示 。 


Dreanveaver 


(i) Dreamweaver 会 自动 将 此 辫 档 转换 为 模板 。 


EditFegionl 
此 区 域 将 可 以 在 基于 该 模板 的 文档 
中 进行 编辑 。 


图 10-26 ”提示 对 话 框 图 10-27 “新 建 可 编辑 区 域 ” 对 话 框 
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09 光标 定位 在 表格 外 ， 回 车 后 再 插入 一 个 可 编辑 区 域 。 这 时 文档 共有 两 个 可 编辑 
区 域 ， 如 图 10-29 所 示 。 


dy 下 
rr rh er i ppp pe rr te ep 


神 永 名 从 


让 
扒 
= 个. 


wo 党 a 
EE 


be 
ow -| 国 闻 | WN RE ied WTF) 
一 —— - Oo 


图 10-28 ”实例 效果 图 10-29 ”文档 中 的 可 编辑 区 域 


10 目 执行 “文件 ” |“ 保存 ”命令 ， 将 文件 保存 为 模板 文件 liu_famous.dwt。 
1 人 朝 右 击 库 项 目 管理 面板 中 的 “新 建 库 项 目 ” 按 钮 外 |， 建立 库 项 目 copyrightlbi。 
12 在 库 项 目 管理 面板 中 双击 库 项 目 copyrightlbi， 打 开 库 项 目 编辑 窗口 。 
13 插入 一 个 四 行 一 列 的 表格 ， 表 格 宽度 为 98%， 边 框 粗细 为 0。 选 中 表格 ， 在 属 本 
性 面板 上 的 “对 齐 ” 下 拉 列 表 中 选择 “居中 对 齐 ” 选中 所 有 单元 格 ， 在 属性 面板 上 设置 。 “位 
单元 格 内 容 水 平和 垂直 对 齐 方式 均 为 “居中 ” 将 光标 定位 在 第 一 行 单元 格 中 ， 设 置 单元 上 
格 高 度 为 20， 然 后 单 击 “ 常 用 ”插入 面板 上 的 “水 平 线 ” 按 钮 庆 ， 插 入 一 条 水 平 线 。 库 
14 有 在 第 二 行 至 第 四 行 单元 格 中 输入 版 权 文本 ， 并 指定 邮箱 链接 。 新 建 一 个 CSS 规 
则 定义 版 本 文本 的 颜色 为 #F30。 然 后 新 建 两 个 CSS 规则 定义 链接 文本 的 样式 ， 选 择 器 类 
型 为 “复合 内 容 ” 选择 器 名 称 分 别 为 a:link 和 aphover。 规 则 a:link 的 文本 闫 色 为 #00F:; 
ahover 的 文本 颜色 为 #FE30。copyright.lbi 最 终 制 作 结果 ， 如 图 10-30 所 示 。 


换 << 库 硬是 >> copyright. lbi* 


rd 
i 
上 


-一 一 Doc rcNcY— 
<table> <tr> <td> ER 区 100% v| 回 男 el Ty 


图 10-30 copyright 信息 效果 


15 将 光标 定位 在 模板 liu_famous.dwt 的 第 二 个 可 编辑 区 域 中 ， 删 除 其 中 的 文本 ， 
然后 打开 “ 库 ” 和 面板 ， 选 中 上 一 步 制作 好 的 库 项 目 ， 并 单 击 “插入 ”按钮 插入 库 项 目 。 此 
时 的 页 面 效 果 如 图 10-31 所 示 。 

16 执行 “修改 ”|“ 页 面 属性 ”菜单 命令 ， 在 打开 的 “页 面 属性 ”对 话 框 中 切换 到 
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0L JelaeuU9 


var CFA 让 六 役 每 难 袜 创 和 起 起 
“ 链 提 ”页 和 面 ， 设 置 链 接 颜 色 为 #OOF， 已 访问 链接 关 色 为 好 00， 活 动 链接 颜色 为 #F30。 
17 打开 “模板 ”管理 面板 , 右 击 模板 liu_famous.dwt, 在 弹出 的 快捷 菜单 中 执行 “从 
栋 板 狐 建 ”命令 ， 狐 建 基 于 模板 的 文档 。 可 以 友 现 在 文档 中 只 有 请 词 内 容 和 的 部 的 可 编辑 
区 是 可 编辑 的 ， 如 图 10-32 所 示 。 
18， 执行 “文件 ”|“ 保 存 ” 命 令 保 存 文件 ， 完 成 第 一 张 网 页 的 制作 。 


柳 永 名 作 
再 种 性 春 莫 时 证 妨 花 i 


a 
计 及 襄 蛤 ， 爱 而 接 正 ，。 


I i i i i 1 
i i ir EE 和 
: i ee ee TE t 
EELEEDLAIIIINET EI LL EIT pLELS 
了 
-pp 


了 区 le mn pnbesnna tn 


图 10-31 在 网 页 插入 库 项 目 


19 打开 “模板 ”管理 面板 ， 右 击 liu_famous.dwt 模板 ， 在 弹出 的 快捷 菜单 中 执行 
“从 模板 创建 ”命令 ， 创 建 第 二 个 基于 模板 的 文档 。 


20， 把 诗词 的 内 容 修改 为 第 二 首 词 “ 定 风 波 ” 结果 如 图 10-33 所 示 。 


各 模 iiw_fwswos 
EoD each | 现 模 11n_fmons 
柳 永 名 1 | E 
水 柳 永 名 作 
南 枚 乌 夜 米 乐 定 凡 波 敬 冲 天 
十 霖 欠 认 举 乐 定 扩 该 锥 冲天 

7 tt 

两 罕 锥 | 

切 EF 涪 师 3 

HE 各 条 丛生 友 说， 淡 训 及 风 起 

| 留 赤 处 ， 盖 身 信 发 。 : et 极目 莓 路 . 案 邵 古林， 

i + 坡 ， | 范 映 前 波 千里 。 

1 走 身 车 向 此 ， 人 人 秀 名 前 刊 

尊 鹤 沉沉 楚 天 阅 : 仿 澡 季 、 蕉 日 卜 张 

i 觉 凶 关 苇 过 弹 ， 

| 多情 自 溃 伟 衣 种。 人 

bas ei : 后 间 经 要， 狠 字 难 进 ， 等 间 度 穴 。 

| 筷 抑 库 、 座 网 诺 月 。 : 人 迹 来 语 尽 ， 

| a ee : 宦 泣 职 叶 。 

ee , 此 情怀 ， 队 写 香 和 ， 优 谁 与 光 。 

| 更 与 何人 镜 。 其 亚洲 、 种 捍 知 我 ， 继 日 添 己 虱 ， 
站 [aa 人 np -Sci aaa au 

所 有 Cepyright CotneySoft 2012 ee | Copyright ComeySoft 2012 
Pg Ne Fai TD 
] _ Emal-w benast ye A 和 _ Emad-webrante ‘ 
图 10-32 ”使 用 模板 创建 新 网 页 图 10-33 第 二 张 网 页 效果 


21 按照 第 M17 ~ 420 步 又 同样 的 方法 制作 其 他 网 页 。 
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22 打开 模板 管理 面板 , 双击 liu_famous.dwt 模板 打开 文件 。 为 模板 顶部 的 导航 文本 
指定 链接 目标 ， 使 之 链接 到 到 上 和 耐 制作 的 相应 文件 。 

23 保存 便 板 文档 。 这 时 弹出 “更 新 模板 文件 ”对 话 框 ， 如 网 10-34 所 示 。 

24 月 单 击 “ 更 新 ” 投 钮 ， 更 新 使 用 模板 的 文件 。 弹 出 “更 痢 页 面 ” 对 话 框 ， 如 图 10-35 
所 示 。 蝎 新 完 成 后 ， 在 “状态 ” 域 显示 更新 成 功 消 忆 。 


要 基于 此 模板 更 新 所 有 文件 吗 ? 


yulinli ne. html 


_ 不 更 新 0) 查看 0): EE 本 于 是 时 | | test 避 GE 
更 新 : 口 库 项 目 
四 模板 部) 
口 显示 记录 (0) 
状态 : 


图 10-34 “更 新 模板 文件 ”对 话 框 图 10-35 “更 新 页 面 ”对 话 框 


2 号 单 击 “关闭 ”按钮 完成 网 页 制作 。 
现在 可 以 打开 浏览 器 ， 对 作品 进行 浏览 测试 了 。 


10. 4 ”动手 练 一 练 


1. 创建 一 个 模板 ， 在 模板 中 插入 一 个 可 编辑 区 域 。 

2. 创建 一 个 模板 , 在 模板 中 插入 一 个 可 选区 域 , 然后 在 此 模板 基础 上 创建 两 张 网 页 ， 
个 显示 模板 中 的 可 选区 域 ， 另 一 个 隐藏 模板 中 的 可 选区 域 。 

3. 创建 一 个 库 项 目 ， 库 项 目 内 容 为 你 的 电话 号 侣 和 电子 邮件 地 址 。 

4. 仿造 10.3 和 的 实例 制作 一 个 个 人 网 站 。 


10.5 思考 题 


1. 可 编辑 区 域 、 重 复 区 域 和 可 选区 域 的 适用 范围 是 什么 ? 
2. 模板 和 库 都 有 哪些 作用 ? 创建 库 项 目的 方法 有 哪些 ? 
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本 章 将 详细 介绍 Dreamweaver CS6 的 “首选 参数 ”对 话 框 各 选项 参数 


: 的 功能 和 定制 Dreamweaver CS6 的 方法 , 具体 内 容 包 括 :“ 常 规 ” 选 项 、“ 辅 
助 功能 ”选项 、“ 代 码 颜 色 ” 选 项 、“ 代 码 格 式 ” 选 项 “代码 提示 ”选项 、 


“代码 改写 ”选项 、 “AP 元素” 选项、 "CSS 样式 ”选项 、“ 字 体 ” 选 项 和 
“标记 色彩 ”选项 等 。 通 过 本 章 学 习 ， 将 能 够 定制 个 性 化 的 工作 环境 ， 提 高 


学 习 工 作 效率 。 


一 -一 -一 -一 -一 


Adobe DreamWweaver' (6 


图 “首选 参数 ”对 话 框 各 选项 参数 的 功能 
国 定制 个 性 化 的 工作 环境 
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11.1 “ 首选 参数 ”对 话 框 


“首选 参数 ”对 话 框 是 定制 Dreamweaver CS6 的 主要 区 域 ， 可 以 通过 “编辑 ”菜单 
访问 。 执 行 “ 编 辑 ”| “首选 参数 ”命令 ， 或 使 用 快捷 键 Ctrl + U 打开 “首选 参数 ”对 话 框 ， 
如 图 11-1 所 示 。 


廊 档 选项 : 网 显示 欢迎 屏幕 G) 
中 启动 时 重新 打开 次 档 (ER) 
打开 只 读 疤 件 时 合 削 用户 W) 
启用 相关 交 件 (T) 
搜索 动态 相关 文件 血 ): | 手动 vv 


称 动 父 件 时 更 新 链接 民 ): | 提示 芯 
: 哆 插 六 对 象 时 显示 对 话 框 工 ) 
允许 观 字 节 内 联 输入 (B) 


标题 后 切换 到 普通 段落 (A) 

允许 多 个 连续 的 空格 加 ) 

罗 用 《strong》 和 《em> 代替 人 > 和 “0 

四 在 人 > 或 局 1 半 人 6> 标签 中 放置 可 编辑 区 域 时 发 出 梧 肯 


历史 步骤 最 多 次 数 00: |50 | 
拼写 字典 (6): 


图 11-1 “首选 参数 ”对 话 框 


“首选 参数 ”对 话 框 分 成 两 部 分 : 左边 的 “分 类 ” 域 和 右边 的 当前 选择 类 别 的 参数 。 
在 左边 选择 不 同 的 类 别 ， 在 右边 显示 : 相 ee 


11. 1.1 “常规 ”选项 


“种 规 ” 参 数 设置 Dreamweaver CS6 的 第 规 外 观 。 打 开 “ 首 选 参数 ”对 话 框 ， 然 后 单 
击 “ 分 类 ” 域 鸭 “第 规 ” 选 项 ， 显 示 如 图 11-1 的 对 话 框 。 

> “ “显示 欢迎 屏幕 ”: 在 Dreamweaver 启动 时 或 没有 文件 打开 时 显示 Dreamweaver 
开始 页 面 。 如 果 没 选中 本 项 , 那么 在 局 动 Dreamweaver 时 , 将 打开 一 个 空 日 窗口 。 

> “局 动 时 重新 打开 文档 ”: 在 重新 司 动 Dreamweaver 时 ， 打 开 上 次 关闭 
Dreamweaver 时 所 有 打开 的 文档 。 

> “打开 只 读 文 件 时 警告 用 户 ”: 在 打开 上 只 访 文 件 〈 锁 定 的 文件 ) 时 发 出 敬告。 为 
用 户 提 供 了 解锁 /取出 文件 、 查看 文件 或 取消 的 选项 。 

> “移动 文件 时 更 新 链接 ”: 当 移 动 、 重 命名 或 删除 站 点 中 的 文档 时 Dreamweaver 
所 执行 的 操作 。 可 以 将 该 参数 设置 为 “总 是 ”、“ 从 不 ”或 “提示 ? 

> “插入 对 象 时 显示 对 话 框 ”: 决定 使 用 插入 栏 或 插入 菜单 持 入 图 像 、 表格 、 
Shockwave 影片 和 其 他 某 些 对 象 时 ，Dreamweaver 是 否 提示 用 户 输入 附加 的 信 
上 县。 如 果 茜 用 该 选项 ， 则 不 出 现 对 话 框 ， 用 户 必 须 使 用 属性 检查 器 指定 图 像 的 源 
文件 和 表格 中 的 行 数 等 。 对 于 光标 经 过 疼 像 和 Fireworks HTML， 当 插入 对 象 时 
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11. 1.2 


Wmyeevar (COB 宁 交 疏 全 准 实 全 屯 彼 


总 是 出 现 一 个 对 话 框 ， 而 与 该 选项 的 设置 无 天 。 如 果 要 和 暂时 窗 新 该 设置 ， 可 以 在 
创建 和 插入 对 象 时 按 住 Ctrl 键 ， 再 单 击 设计 视图 。 

“人 允许 双 字 节 内 联 输 入 ”: 如 果 正 在 使 用 适合 于 双 字 节 文 本 〈 如 汉字 字符 ) 处 理 
的 开发 环境 或 语言 工具 包 ， 则 能 够 直接 将 双 字 节 文 本 输入 到 文档 窗口 中 。 当 取消 
选择 该 选项 时 , 将 显示 一 个 用 于 输入 和 转换 双 衬 节 文 本 的 文本 输入 窗口 ,文本 补 
接受 后 显示 在 文档 窗口 中 。 

“标题 后 切换 到 普通 段 洲 ”: 指定 在 设计 视图 中 于 一 个 标题 段 洲 的 结尾 按 下 回 车 
键 时 ， 将 创建 一 个 用 p 标签 进行 标记 的 狐 段 沙 。 当 禁用 该 选项 时 ， 在 标题 段落 的 
结尾 按 下 Enter 键 ， 将 创建 一 个 用 同一 标题 标签 进行 标记 的 狐 段 沙 。 

“人 允许 多 个 连续 的 空格 ”: 指定 在 设计 视图 中 键入 两 个 或 两 个 以 上 的 空格 时 将 创 
建 不 中 断 的 空格 ， 这 些 空 格 在 浏览 器 中 显示 为 多 个 空格 。 该 选项 主要 针对 习惯 于 
在 字 处 理 程序 中 键入 的 用 户 。 当 禁用 该 选项 时 ， 多 个 空格 将 被 当 作 单个 空格 。 

“用 <strong> 和 <em> 代 奉 <b> 和 <i> ”: 只 要 执行 的 操作 中 用 到 <b> 标 签 和 <i> 标 签 ， 
Dreamweaver 了 歼 分 别 使 用 <strong> 标 签 和 <em> 标 签 取 代 它 们 。 知 要 在 文档 中 使 用 
<b> 和 <i> 标 签 ， 请 取消 选择 此 选项 。 

“历史 步骤 最 多 次 数 ”: 设 定 “历史 记录 ”面板 中 保留 和 显示 的 步骤 数 。 默 认 值 
对 于 大 多 数 用 户 来 说 应 该 足够 使 用 ， 如 果 超 过 了 “历史 记录 ”面板 中 的 给 定 步 又 
数 ， 则 将 丢弃 最 早 的 步骤 。 

“拼写 字典 ”: 列 出 可 用 的 拼写 字典 。 如 果 字 和 典 中 包含 多 种 方言 或 拼写 惯例 〈 如 
美国 瑞 语 和 天 国 喘 语 ) ， 则 方言 单独 列 在 字典 弹出 式 荣 单 中 。 


“辅助 功能 ”选项 


此 对 话 框 用 于 激活 “辅助 功能 ”对 话 框 。 若 要 更 改 这 些 参数 ， 可 i 打开 “首选 参数 ” 


对 话 框 ， 然 后 单 击 “分 类 ” 域 的 “辅助 功能 ”显示 如 图 11-2 的 对 话 框 。 
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”辅助 功能 


在 插入 时 显示 辅助 功能 属性 : 


四 表单 对 象 灾 ) 
四 框架 扣 ) 
固 霸 体 加 ) 
代码 查 东 图 像 民 ) 
代码 颜色 


各 任 作 允 口 打 开 时 使 焦点 在 面板 中 (Kk) 
六 件 类 型 / 编辑 器 回 屏 丰 外 呈现 ( 使 用 屏幕 读 取 器 时 禁用 ) (0) 


芷 训 虎 证 中 预 蜗 
站 点 
字体 


图 11-2 “辅助 功能 ”对 话 框 


> “ “在 插入 时 显示 辅助 功能 属性 ”: 选择 要 为 其 激活 辅助 功能 对 话 框 的 元 素 。 对 于 
每 个 选 定 的 元 到 ,一 个 辅助 功能 对 话 框 都 会 在 将 该 元 素 插 入 文档 时 提示 用 户 输 入 
辅助 功能 标签 或 属性 。 当 插入 狐 表 格 时 , 辅助 功能 属性 会 目 动 显 示 在 “插入 表格 ” 
对 话 框 中 。 

> “打开 时 使 焦点 在 面板 中 ”: 如 果 要 在 打开 某 个 和 面板 后 访问 该 面板 ,请 选择 此 选 
项 。 默 认 情 况 下 ， 打 开 某 个 面板 后 ，Dreamweaver CS6 会 将 焦点 保持 在 “设计 ” 
视图 或 “代码 ”视图 中 。 如 果 要 使 用 屏 硕 阅读 器 ， 会 使 得 访问 面板 十 分 困难 。 选 
择 此 选项 将 能 够 直接 访问 面板 。 

> “ “ 屏 磺 外 呈现 (使 用 屏 敌 读 取 人 占 时 禁用 ) ”: 如 果 无 法 使 用 屏幕 阅读 器 ， 则 取消 
选择 此 复 选 框 。 


11. 1.3 “代码 颜色 ”选项 


“代码 颜色 ”参数 用 于 控制 Dreamweaver CS6 的 代码 颜色 。 要 更 改 这 些 参 数 ， 可 打开 
“首选 参数 ”对 话 框 ， 然 后 单 击 “ 分 类 ” 域 的 “代码 颜色 ” 显示 如 图 11-3 的 对 话 框 。 

> “文档 类 型 ”: 指定 在 Dreamweaver CS6 中 编辑 的 代码 类 型 。 
“默认 背景 ”: 设 定 在 “文档 类 型 ”列表 中 指定 的 类 型 代码 的 背景 颜色 。 
“实时 代码 背景 ”: 指定 实时 “代码 ”视图 的 背景 颜色 。 
“只 读 背 景 ”: 指定 只 读 文 本 的 背景 颜色 。 
“隐藏 字符 ”: 显示 用 来 替代 空白 处 的 特殊 字符 。 
“实时 代码 更 改 ”: 设置 实时 “代码 ”视图 中 发 生 更 改 的 代码 的 高 亮 颜 色 。 
“编辑 颜色 方案 ”: 单 击 该 按钮 将 弹出 “编辑 颜色 方案 ”对 话 框 ， 如 图 11-4 所 
示 。 用 于 议定 在 Dreamweaver 中 对 “文档 类 型 ”指定 的 类 型 代码 闫 色 。 


加 
已 玛 戎 色 编辑 HT 卫 . 的 颜色 方案 
让 特 贡 到 要 下 
文本 颜色 人 ) ， 到 | 00 
背 最 颜色 B): [FT 
B 7 U 
| 护 博 志 色 方 塞 t | 
豆 记 色 量 而 1 | a 本 IF 阳 奈 于 下 0 ， 国 | 本 呈 Css 注释 _ 
二 时 全 四 背景 号 ): | .| 于 六 EL ee Ei 预览 (FY): 
具 请 埋 最 避 ]: | | WIE [而 
</script> 
</p><form action="page.cgi"> 
<input tvype="submit" value="Press Me" /> 
</form> 
Text</ ta 
v 
Lm] CC < | 国 导 | 
图 11-3 “代码 颜色 ”对 话 框 图 11-4 “编辑 颜色 方案” 对 话 框 


11.1.4 “代码 格式 ”选项 

“ 代 人 码 格式 ”参数 选择 控制 Dreamweaver CS6 中 的 HTML 源 代 码 格 式 。 建 议 一 般 不 
要 去 改变 它 。 辱 要 更 改 这 些 参数 ， 可 打开 “首选 参数 ”对 话 框 ， 然 后 单 击 “ 分 类 ” 域 的 
“代码 格式 ” 显示 如 图 11-5 的 对 话 框 。 

> ““ 缩 进 ”: 用 于 设 定 缩 进 的 大 小 ， 以 及 是 使 用 空格 缩 进 还 是 使 用 Tab 键 缩 进 。 如 
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姨 TT 小 


9SD I9AB83MUWP31C 但 赎 


LL 48}QBUD 


Vv 


> 


11. 1.5 


BE (LA 


ap COD 守 交纳 各 准 实 他 表 丰 
果 使 用 空格 ， 缩 进 大 小 以 空格 为 单位 ; 如 果 使 用 Tab 键 ， 缩 进 大 小 以 Tab 键 为 单 


一 


位 。 


缩 进 EF): 回 有 [2 ”| | 空格 Y| 
制 表 符 大 小 (7): |4 | 
换行 符 类 型 (0): [CR IF (Windows) ~ 
默认 标签 大 小 写 CC) : | 《小 写字 母 > 司 
默认 属性 大 小 写 4) : | 小 写字 母 =" 值 " 二 
覆盖 大 小 写 : 口 标签 (0) 回 属 性 0 
TD 标签 : 四 不 在 TD 标签 内 包括 换行 符 加 ) 


在 清关 鲁 中 预 高 级 格式 设置 
站 点 


字体 


图 11-5 “代码 格式 ”对 话 框 


“ 制 表 符 大 小 ”: 设 定 以 字符 空格 为 单位 度量 的 制 表 符 的 大 小 。 

“换行 从 类 型 ”: 指定 承载 远程 站 点 的 远程 服务 器 的 类 型 (Windows、Macintosh 
或 UNIX) 。 选 择 正确 的 换行 符 类 型 可 以 确保 HTML 源 代 码 在 远程 服务 器 上 能 够 
正确 显示 。 (对 于 FTP， 此 设置 只 应 用 于 二 进 制 传输 模式 ; Dreamweaver ASCII 
传输 模式 将 忽略 此 设置 。 如 果 使 用 ASCI 模式 下 载 文件 ， 则 Dreamweaver CS6 
根据 计算 机 的 操作 系统 设置 换行 行 ; 如 果 使 用 ASCII 模式 上 和 载 文 件 ， 则 换行 符 都 
设置 为 “CR LF”) 。 当 使 用 只 识别 某 些 换行 符 的 外 部 文本 编辑 器 时 ， 此 设置 也 
有 用 。 例 如 ， 如 果 “ 记 事 本 ”是 外 部 编辑 器 ， 则 使 用 “CR LF (Windows) ”。 

“默认 标签 大 小 号” 和 “默认 属性 大 小 写 ”: 控制 标签 和 属性 名 称 的 大 小 写 。 这 
些 选项 应 用 于 在 文档 窗口 中 插入 或 编辑 的 标签 和 属性 , 但 是 它们 不 能 应 用 于 在 代 
码 视图 中 直接 输入 的 标签 和 属性 ， 也 不 能 应 用 于 打开 的 文档 中 的 标签 和 属性 。 

“ 履 盖 大 小 写 ”: 为 标签 和 属性 指定 是 否 在 任何 时 候 都 强制 使 用 指定 的 大 小 写 选 
项 。 当 选择 其 中 的 一 个 选项 时 ， 打 开 文 档 中 的 所 有 标签 或 属性 立即 转换 为 指定 的 
大 小 写 ， 同 样 ， 从 这 时 起 打开 的 每 个 文档 中 的 所 有 标签 或 属性 也 都 转换 为 指定 的 
大 小 写 , 在 代码 视图 和 快速 标签 编辑 器 中 键入 的 标签 或 属性 也 转换 为 指定 的 大 小 
写 , 使 用 插入 栏 插 入 的 标签 或 属性 同样 也 转换 为 指定 的 大 小 写 。 例如， 如 果 想 让 
标签 名 称 总 是 转换 为 小 号 ， 则 在 “默认 标签 大 小 写 ” 选 项 中 指定 小 写字 母 ， 然 后 
选择 “覆盖 大 小 写 ” 的 “标签 ”选项 。 于 是 当 打 开 包 含 大 写 标 签名 称 的 文档 时 ， 
Dreamweaver 将 它们 全 部 转换 为 小 写 。 

“不 在 TD 标签 内 包括 换行 符 ”: 用 于 设置 td 标签 后 是 个 目 动 添加 换行 符 。 

“高 级 格式 设置 ”: 设置 CSS 源 格 式 和 标签 库 格 式 。 


“代码 提示 ”选项 


“ 代 人 码 提示 ”参数 用 于 控制 Dreamweaver 在 输入 代码 时 快速 插入 标签 名 称 、 属 性 和 值 。 
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为 外 即使 举 用 了 “代码 所 示 ” 也 可 以 通过 在 Windows 中 按 Ctl+ 空 格 组 合 键 在 代码 视图 
或 代码 检 枉 间 中 显示 弹出 式 提示 。 厂 要 更 改 这 些 参数 ， 可 打开 “首选 参数 ”对 话 框 ， 然 
后 单 击 “ 分 类 ” 域 的 “代码 提示 ”选项 ， 显 示 如 网 11-6 的 对 话 框 。 


代码 提示 


结束 标签 : 全 键入 “< ”后 (T) 
〇 键入 起 始 标 签 “>” 后 (0) 
人 从 不 呈 
选项 : 四 自用 代码 提示 CC) [启用 描述 工具 提示 全) 
延迟 (0): 了 0 秒 


0 S 
立 件 兴 型 /编辑 器 属性 名 称 


区 加 尾 性 值 
和 对 象 方法 和 变量 

字 仁 HITML 实体 

Css 属性 名 称 

代码 提示 工具 
BCBindinesCodeHints 


若 要 添加 或 删除 标签 和 尾 性 ,请 使 用 标签 库 编辑 器 . 


图 11-6 “代码 提示 ”对 话 框 


> “ “结束 标签 ”: 指定 希望 Dreamweaver 插入 结束 标签 的 方式 。 上 默认 情况 下 ， 在 
键入 字符 “</ \” 后 ，Dreamweaver 会 目 动 插入 结束 标签 。 可 以 更 改 此 默认 行 
为 ， 以 便 在 键入 开始 标签 的 最 后 尖 括 号 (>) 之 后 插入 结束 标签 ， 或 者 根本 束 不 
插入 结束 标签 。 

> “局 用 代码 提示 ”: 当 在 “代码 ”视图 中 输入 代码 时 局 用 代码 提示 功能 。 拖 动 “ 延 
迟 ” 背 块 设置 Dreamweaver 在 显示 适当 的 提示 之 前 经 过 的 以 秒 为 单位 的 延迟 时 
a 
“局 用 描述 工具 提示 ”: 显示 所 选 代 码 提 示 的 扩展 摘 述 。 
“来 单 ”: 设置 在 键入 代码 时 具体 要 显示 哪 种 类 型 的 代码 提示 ， 其 中 还 包括 
Dreamweaver CS6 新 增 的 jQuery 代码 提示 。 可 以 使 用 全 部 或 部 分 荣 单 。 


11. 1.6 “代码 改写 ”选项 


“代码 改写 ”参数 用 于 设置 在 打开 文档 ， 复 制 或 粘贴 表单 元 素 以 及 在 使 用 
Dreamweaver 工具 (例如 属性 检查 桌 〉 输入 属性 值 和 URL 时 ， 是 个 要 Dreamweaver 修 
改 代 码 ， 以 及 如 何 修改 。 当 在 代码 视图 中 编辑 HTML 或 脚本 时 ， 这 些 参数 选择 不 起 作用 。 
在 要 更 改 这 些 参数 ， 可 打开 “首选 参数 ”对 话 框 ， 然 后 单 击 “ 分 类 ” 域 鸭 “代码 改写 ” 
显示 如 图 11-7 的 对 话 框 。 

> “修正 非法 骸 套 标签 或 未 结束 标签 ”: 改写 重 营 的 标签 。 例如, 将 <h><i>text</h> 
</ 谊 改 与 为 <b><i>text《/i></h>。 如 果 缺 少 右 引号 或 右 括 写 ， 此 选项 还 将 插入 石 
引 | 与 或 右 插 号 。 
“粘贴 时 重 命名 表单 项 ”: 确保 表单 对 象 不 会 具有 重复 的 名 称 。 
“删除 多 余 的 结束 标签 ”: 删除 没有 对 应 开始 标签 的 结束 标签 。 
“修正 或 删除 标签 时 发 出 警告 ”: 显示 Dreamweaver 试 钢 更 正 的 、 技 术 上 无 效 的 
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uk 


9SD I9AB83MUP31C 但 付 


EE. J@}QBUD 


myeovar CAE 中文 朋 每 准 实 创 外 入 
HTML 的 摘要 。 搞 要 使 用 行 号 和 列 号 记录 问题 的 位 置 ， 以 便 用 户 可 以 找到 更 正 ， 
并 确保 它 是 按 预 期 方式 呈现 的 。 


改写 代码 : 回 修 正 非 法 嵌 套 标签 或 未 结束 标签 F) 
粘贴 时 重 命名 表单 项 (R) 
口 删 除 多 余 的 结束 标签 遇 ) 


从 不 改写 代码 : |. a5 . asr . asc .asp . ascx .asmx . aspx 
特殊 字 罕 : [使 用 & 将 尾 性 值 中 的 <《 > 训 和 “ 编码 CC) 


URL 编码 : @ 不 编码 特殊 字符 各) 
人 使 用 呀 将 URL 中 的 特殊 字符 编码 EF) 


在 浏览 器 中 预览 〇 使 用 % 将 RL 中 的 特殊 字符 编码 o 
字体 


| 


图 11-7 “代码 改写 ”对 话 框 


> “从 不 改写 代码: 在 带 有 扩展 的 文件 中 ”: 防止 Dreamweaver 改写 具有 指定 文 
件 扩展 名 的 文件 中 的 代码 。 对 于 包含 第 三 方 标签 的 文件 ， 此 选项 特别 有 用 。 
> “特殊 字符 : 使 用 && 将 属性 值 中 的 <、>、 人 和 "编码 ”: 确保 URL 只 包含 合法 的 


己 2 久久 


字符 。 


司 


提示 :| 洁 项 和 下 面 的 选项 不 会 应 用 于 在 “代码 ”视图 中 键入 的 URL。 另 外 ， 它 
们 不 会 使 已 经 存在 于 文件 中 的 代码 发 生 更 改 . 
“不 编码 特殊 字符 ”， 防 止 Dreamweaver 对 URL 中 的 特殊 字符 进行 编码 ， 从 而 
仅 使 用 合法 字符 。 
> “使 用 &# 将 URL 中 的 特殊 字符 编码 ”: 确保 只 包含 合法 字符 。 
“使 用 % 将 URL 中 的 特殊 字符 编码 ”: 确保 只 包含 合法 字符 。 这 种 使 用 百 分 号 
的 编码 方法 对 旧版 本 的 浏览 器 而 言 比 用 中 并 进行 编码 兼容 性 更 好 , 但 对 某 些 语言 
不 是 很 理想 。 


11. 1.7 “CSS 样式 ”选项 


“CSS 样式 ”参数 用 于 控制 CSS 样式 参数 选择 控制 Dreamweaver 如 何 编写 定义 CSS 
样式 的 代码 。CSS 样式 可 以 以 速记 形式 编写 ， 有些 人 觉得 这 种 形式 使 用 起 来 更 容易 。 但 茶 
些 旧 版 本 的 浏览 吉 不 能 正确 解释 速记 。 要 更 改 这 些 参数 ， 可 打开 “首选 参数 ”对 话 框 ， 然 
后 单 击 “ 分 关 ” 域 的 “CSS 样式 ”选项 ， 显 示 如 图 11-8 的 对 话 框 。 

> “ 当 创 建 CSS 规则 时 使 用 速记 ”: 选择 Dreamweaver CS6 以 速记 形式 编写 的 CSS 
样式 属性 ， 包 括 Dreamweaver CS6 新 增 的 CSS 过 渡 效 果 。 
> “ 当 编 辑 CSS 规则 时 使 用 速记 ”: 控制 Dreamweaver CS6 是 否 以 速记 形式 重新 
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编写 现 有 样式 。 
> ““ 当 在 CSS 面板 中 双击 时 ”: 选择 用 于 在 Dreamweaver CS6 中 编辑 CSS 规则 的 
首选 工具 。 


当 创 建 Css 规则 时 : 
使 用 速记 : 回 ] 字体 灾 ) 
口 背 景 6) 
口 迪 界 与 填充 加 ) 
口 迪 框 与 迪 框 宽 W) 
口 列表 样式 (L) 
过 渡 效 果 (T) 


当 编 辑 [Css 规则 时 : 


六 本 使 用 速记 : 〇 如果 原来 使 用 速记 (0) 
En 癸 依据 以 上 设置 () 
字体 加 修改 时 打开 Css 交 件 CC) 


当 在 CSS 面板 中 颈 击 时 : 图 使 用 Css 对话 框 编 辑 E) 
人 使 用 “属性 ” 寄 格 编辑 Ff) 
〇 使 用 代码 视图 编辑 0) 


CE 


图 11-8 “CSS 样式 ”对 话 框 


11. 1.8 “文件 类 型 /编辑 器 ”选项 


“文件 类 型 /编辑 器 ”对 话 杠 用 于 议定 用 户 在 Dreamweaver CS6 中 可 以 打开 的 其 他 外 
部 编辑 器 。 当 在 外 部 编辑 喜 中 完成 更 改 后 ， 必 须 在 Dreamweaver CS6 中 手动 刷新 文档 。 要 
更 改 这 些 参数 ， 可 打开 “首选 参数 ”对 话 框 ， 然 后 单 击 “ 分 类 ” 域 的 “文件 类 型 /编辑 器 ” 
选项 ， 显 示 如 图 11-9 的 对 话 框 。 


文件 类 型 / 编辑 器 
在 式 码 视图 中 打开 (0): .J]5 .asa .css .1nc .txt .as .asc .asr .htaccess .htpasswd 


外 部 代码 编辑 器 E): 
重 载 修 鸣 过 的 文件 于): | 提示 x 
运行 时 先 保存 文件 G): | 提示 立 


Fireworks (F): IC:\Program Files\hdobe\hdobe Fireworks CS6AF| | 训 览 钙 ). 
[= [tj [Ss) 设 为 主要 名) 


扩展 名 编辑 器 

. Png Fireworks 【 主要) 
.glif 

.Jp 人 .Jpe .jpeg 
.ps 

.fla 

.Wa 

.alff .alftf .aifc 
.mpB3 

.MPE .mpeg 

. moy 


图 11-9 “文件 类 型 /编辑 费 ” 对 话 框 


203 


uk 


9SD I9ABP3MUWP31C 苹 扰 


LL 48}QBUD 


Tea (CAVYB 字 交纳 保 准 实 他 条 在 
> “在 代码 视图 中 打开 ”: 用 于 设置 在 代码 视图 中 日 动 打开 的 文件 的 后 级 。 
> “ “外 部 代码 编辑 器 ”: 用 于 设 定 外 部 代码 编辑 器 ， 可 以 单 击 “ 浏 览 ” 按 钮 选择 一 
个 文本 编辑 器 。 
> “”“ 重 载 修改 过 的 文件 ”: 设 定 当 Dreamweaver CS6 检测 到 对 Dreamweaver CS6 
中 打开 的 文档 从 外 部 进行 了 更 改 时 ， 应 该 执行 哪些 操作 。 
> “运行 时 先 保 存 文件 ”: 设 定 Dreamweaver 应 该 在 局 动 编辑 器 之 前 总 是 保存 当 表 
的 文档 、 从 不 保存 文档 ， 还 是 每 次 局 动 外 部 编辑 器 时 提示 询问 是 否 保 存 文 档 。 
> “Fireworks”: 指定 Fireworks 应 用 程序 的 安装 路 径 。Fireworks 是 Dreamweaver 
CS6 中 默认 的 外 部 图 像 编 辑 器 。 
> “扩展 名 ”: 可 以 为 其 设置 外 部 编辑 器 的 文件 扩展 名 。 单 击 列表 上 方 的 出 按钮 ， 
可 以 添加 图 像 格 式 类 型 。 
> “编辑 器 ”: 设置 选 定 的 文件 类 型 的 编辑 器 。 单 击 “ 编 辑 器 ”列表 上 方 的 出 按 
钮 ， 可 以 浏览 并 选择 要 作为 此 文件 类 型 的 编辑 器 局 动 的 应 用 程序 。 
“ 设 为 主要 ”; 设置 文件 类 型 的 主编 辑 器 。 当 选择 要 编辑 图 像 类 型 时 , Dreamweaver 
自动 使 用 主编 辑 器 。 可 以 在 “文档 ”窗口 中 为 该 儿 像 选择 其 他 编辑 器 。 
11.1.9 “字体 ”选项 
“学 体 ” 参 数 选择 控制 Dreamweaver CS6 默认 字体 。 文 档 的 编 但 方式 确定 如 何在 浏览 
囊 中 显示 文档 。Dreamweaver CS6 字体 议 置 使 用 户 能 够 以 喜爱 的 字体 和 大 小 得 看 给 定 的 编 
仔 ， 而 不 影响 其 他 人 在 浏览 需 中 得 看 时 文档 的 显示 方式 。 要 更 改 这 些 参 数 ， 可 打开 “首选 
参数 ”对 话 框 ， 然 后 单 击 “ 分 类 ” 域 的 “字体 ” 显示 的 对 话 框 如 图 11-10 所 示 。 


Vv 


(GB18030) 


均衡 字体 中 ) : | imes Hew Romar ~ 大 小 (5): 112 pt (中 ) 


回 定 | 1 小 小 
在 训 览 强 中 预览 固定 字体 必 ) : Courier Hew 当 TI 10 pt 【小 ) 
Se 居 码 视图 (C5): Cowrier Hew 强大 小 C): |10 pt (小 ) 


立 件 比较 
立 件 尖 型 /编辑 器 


使 用 动态 字体 映射 0 


图 11-10 “和 字体” 对话 框 


> “ “字体 设置 > : 用 以 指定 在 Dreamweaver CS6 中 针对 使 用 给 定编 码 类 型 的 文档 所 
用 的 字体 集 。 例 如 ， 大 要 指定 简体 中 文 文档 使 用 的 字体 ， 请 从 “学 体 设 置 ” 列 表 
中 选择 “和 窗 体 中 文 ”。 大 要 在 字体 弹出 式 朋 单 中 显示 一 种 字体 ， 该 字体 必须 安装 
在 计算 机 上 。 例 如 ， 硅 要 但 看 中 文 文本 ， 必 须 安装 中 文学 体 。 
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> “均衡 字体 ”: 是 Dreamweaver CS6 用 以 显示 普通 文本 (如 段 洲 文本 、 标 题 和 表 
格 〉 的 字体 。 其 默认 值 取 决 于 系统 上 安装 的 学 体 。 对 于 大 多 数 美 国 系统 ， 在 
Windows 中 默认 值 为 Times New Roman 12 pt (中 ) 。 

> “ “固定 字体 ”: 是 Dreamweaver 用 以 显示 pre、code 和 tt 标签 内 文本 的 字体 。 其 
默认 值 取 决 于 系统 上 安装 的 字体 。 对 于 大 多 数 系 统 ， 在 Windows 中 默认 值 为 
Courier New 10 pt 〈 小 ) 。 

> “ 代 人 码 视 图 ”: 是 用 于 显示 “代码 ”视图 和 代码 检 查 器 中 所 有 文本 的 字体 。 其 默 
认 值 取决 于 系统 上 安装 的 字体 。 


11.1.10 “标记 色彩 ”选项 


“标记 色彩 ”对 话 杠 用 于 设置 用 以 标识 模板 区 域 、 库 项 目 、 第 三 方 标签 、 布 局 元 素 和 
代码 的 颜色 。 知 要 更 改 这 些 参数 ,可 打开 “首选 参数 ”对 话 框 ， 然 后 单 击 “分 类 ” 域 的 “ 标 
记 色 彩 ”， 显示 如 图 11-11 的 对 话 框 。 

“ 忌 标清 过 ”: 设置 限 标 从 上 方 经 过 时 的 颜色 。 
“可 编辑 区 域 ”: 设置 可 编辑 区 域 的 颜色 。 

“ 骸 套 可 编辑 ”: 设置 典 套 可 编辑 区 的 颜色 。 
“锁定 的 区 域 ”: 设置 锁定 的 区 域 的 颜色 。 

“ 库 项 目 ”: 设置 库 项 目的 颜色 。 

“其 他 厂商 标签 ”: 设置 第 三 方 标签 的 颜色 。 
“未 解释 ”: 设置 未 解释 标签 的 闫 色 。 

“已 解释 的 ”: 设置 已 解释 标签 的 颜色 。 


AAA Vv vv vv YY 


鼠标 滑 过 0): 属 | 部 rroro | 
可 编辑 区 域 FE): 
嵌 套 可 编辑 (3): 
锁定 的 区 域 LL): 
库 项 目 (B): 
其 它 厂商 标签 (T): 


CC 
#C3 
FFC 
#FFC 
#CFF 


时 


建文 档 
在 训 蜗 器 中 预 蜗 
| 站 点 
字体 


活动 数据 : 
未 解释 0D): [FF | 
已 解释 的 (R): 三 || 寺 FC 


CE 
图 11-11 “标记 色彩 ”对 话 框 


11.1.11 “不 可 见 元 素 ” 选 项 


“不 可 见 元 素 ” 参 数 选择 控制 Dreamweaver CS6 中 是 否 以 图 标 代 替 不 可 显示 元 聚 显示 
在 文档 中 。 知 要 更 改 这 些 参 数 ， 可 打开 “首选 参数 ”对 话 框 ， 然 后 单 击 “ 分 类 ” 域 的 “不 
可 见 元 素 ” 显示 如 图 11-12 的 对 话 框 。 


205 


uk 


9SD I9AB3MUWP31IG 巧 扎 


LL 48}QBUD 


200 


VvV YY 


Vv 


和 多 
jx 


显示 : 出 回 命 名 错 记 
虽 口 肢 本 
| 一 口 注 释 
咽 口 换行 符 
| 渭 口 客户 端 图 像 地 图 
| 辐 名 嵌入 样式 
| 三 [表单 隐藏 区 域 
[ 河 名 表单 范围 
唱 口 息 元 素 的 锚 点 
| 全 口 对 齐 元 素 销 记 
[到 网 可 视 化 服务 器 标签 (hsP,，CFML，...】 
[名 口 非 可 视 化 服务 器 标签 AsF，CFWL，...) 
国 加 css 显示 :无 

显示 动态 女 本 于 : | {Recordset. Field} v 
服务 器 端 包 括 : [x] 显 示 所 包含 交 件 的 内 容 


图 11-12 “不 可 见 元 素 ” 对 话 框 


“命名 销 记 ”: 显示 标记 文档 中 的 每 个 命名 销 记 位 置 的 图 标 。 

“脚本 ”: 显示 标记 文档 正文 中 的 JavaScript 或 VBScript 代码 位 置 的 图 标 。 选 择 
该 图 标 可 在 属性 检查 器 中 编辑 脚本 或 链接 到 外 部 脚本 文件 。 

“注释 ”: 显示 标记 HTML 注释 位 置 的 图 标 。 选 择 该 图 标 可 在 属性 检查 右 中 但 
看 注释 。 

“换行 符 ”: 显示 标记 每 个 换行 符 br 位 置 的 图 标 。 默 认 情 况 下 取消 选择 该 选项 。 

“客户 问 图 像 地 图 ”: 显示 标记 文档 中 每 个 客户 闹 图 像 地 图 位 置 的 图 标 。 

“ 舱 入 样式 ”: 显示 标记 文档 正文 中 骸 入 CSS 样式 位 置 的 图 标 。 如 果 CSS 样式 
放置 在 文档 的 head 部 分 ， 则 它们 不 出 现在 文档 窗口 中 。 

“表单 隐藏 区域”: 显示 标记 类 型 属性 设置 为 “隐藏 ”的 表单 域 位 置 的 图 标 。 

“表单 范围 ”: 在 表单 周围 显示 一 个 边框 ， 以 便 看 到 插入 表单 元 素 的 位 置 。 该 边 
框 显 示 form 标签 的 范围 , 因此 该 边框 内 的 任何 表单 元 素 都 正确 地 包括 在 form 标 
签 中 。 

“AP 元 素 的 镭 点 ”: 定义 层 的 代 但 位 置 的 图 标 。 层 本 喘 可 以 在 页 面 中 的 任何 位 
置 。 层 不 是 不 可 见 元 素 , 只 有 定义 层 的 代码 才 是 不 可 见 的 。 选 择 访 图标 可 选择 层 ， 
这 样 即使 层 标记 为 隐藏 ， 还 是 可 以 看 见 层 中 的 内 容 。 

“对 齐 元 素 销 记 ”: 显示 标记 接受 align 属性 的 元 素 的 HTML 代码 位 置 的 图 标 。 
包括 图 像 、 表 格 、ActiveX 对 和 象 、 插 件 和 小 应 用 程序 。 有 些 情况 下 ， 元 系 的 代码 
可 能 与 可 见 对 象 分 开 。 

“可 视 化 服务 器 标签 ”和 “ 非 可 视 化 服务 器 标签 ”: 显示 内 容 不 能 在 文档 窗口 中 
显示 的 服务 器 标签 (如 Active Server Pages 标签 和 ColdFusion 标签 ) 的 位 置 。 

“显示 动态 文本 于 ”: 议 置 动态 文本 的 占 位 符 。 例 如 ， 要 使 用 空 的 大 括号 作为 动 
态 文 本 的 占 位 符 ， 则 选择 {}。 

“服务 问 疾 包括”: 设置 在 将 放置 于 文档 中 时 ， 是 否 在 Dreamweaver 的 “设计 


视图 中 显示 外 部 文件 的 内 容 。 
11. 1.12 “Ap 元 素 ” 选 项 


“AP 元 素 ” 对 话 框 用 于 设置 AP 元 素 参 数 的 选择 。 寿 要 更 改 这 些 参数 ， 可 打开 “ 首 
选 参数 ”对 话 框 ， 然 后 单 击 “ 分 类 ” 域 的 “AP 元 素 ”， 显示 如 图 11-13 的 对 话 框 。 

> “显示 ”: 确定 AP 元 素 在 默认 情况 下 是 耕 可 见 。 其 选项 为 Default (默认 )、Inherit 
(继承 ) 、Visible (可 见 ) 和 hidden (隐藏 〉。 

> “ “ 宽 ” 和 “高 ”: 指定 执行 “插入 ”|“ 布 局 对 象 ”|“AP Div” 命 令 创建 的 AP 
元 素 的 默认 宽度 和 局 度 (以 像 取 为 单位 )。 
“背景 颜色 ”: 指定 献 认 的 背景 闫 色 。 
“背景 图 像 ”: 指定 默认 的 背景 图 像 。 单 击 “ 浏 览 ” 投 钮 可 在 计算 机 上 得 找 网 像 
BA 

> “ 骸 僚 : 在 AP Div 中 创建 以 后 舱 伍 ”: 指定 从 现 有 AP 元 系 边 界 内 的 茶点 开始 
绘制 的 AP 元 素 是 否 应 该 是 舱 套 的 AP 元 素 。 当 绘制 AP 元 素 时 , 按 下 Alt 键 可 临 
时 更 改 此 设置 。 


显示 0 : 

宽 章 ): 

高 0): 

青 最 颜色 (9) :加 | 

背景 图 像 CL): 
嵌 套 : 口 在 好 div 中 创建 以 后 嵌 套 加 


图 11-13 “AP 元 素 ” 对 话 框 


11. 1.13 “新 建文 档 ” 选 项 


“新 建文 档 ” 对 话 框 用 于 定义 被 Dreamweaver CS6 设置 为 站 点 默认 文档 的 文档 类 型 。 
例如 , 如 果 站 点 的 大 多 数 页 面 是 特定 的 文件 类 型 (如 Cold Fusion、HTML 或 ASP、ASPNET 
文档 )， 可 以 设置 目 动 创建 指定 文件 类 型 的 新 文档 的 文档 参数 选择 。 咎 要 更 改 这 些 参数 ， 
可 打开 “首选 参数 ”对 话 框 ， 然 后 单 击 “ 分 类 ” 域 的 “新 建文 档 ” 选 项， 显示 如 网 11-14 
的 对 话 框 。 

> “ “默认 文档 ”: 选择 将 要 用 于 所 创建 页 面 的 文档 类 型 。 
> “默认 扩展 名 ”: 选择 HTML 作为 默认 文档 时 ， 设 置 文档 的 默认 文件 扩展 名 
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(Chtm、.html) 。 其 他 文件 类 型 禁用 此 选项 。 

> “ “默认 文档 类 型 ”: 选择 在 站 点 中 创建 的 狐 页 面 的 默认 类 型 。 

> “默认 编码 ”: 指定 在 创建 狐 页 和 面 时 要 使 用 的 默认 编码 。 默 认 编 码 与 文档 一 起 存 
储 在 文档 头 中 插入 的 meta 标 签 内 ， 它 告诉 浏览 器 和 Dreamweaver 应 如 何 对 文档 进 
行 解码 以 及 使 用 哪些 字体 来 显示 解码 的 文本 。 

> ““ 当 打开 未 指定 编码 的 现 有 文件 时 使 用 ”: 指定 在 未 指定 任何 编码 的 情况 下 打开 
一 个 文档 时 应 用 默认 编码 。 


默认 闷 档 吹 ) ;HI 虹 


默认 扩展 名 [E): |. html 
默认 嫌 档 类 型 TD) : | XHTWL 1.0 Transitional 


默认 编码 血 ): |Unicode (UTF-8) v 
回 当 打开 未 指定 编码 的 现 有 文件 时 使 用 
文件 关 型 编辑 器 Unicode 标准 化 表单 下): |Cc ( 需 范 分 和 解 ， 后 跟 规 范 合成 ) v 


证 点， Wh 四 包括 Unicode 签名 (BOM (5) 
字体 


轩 按 Control+tH 蛤 合 键 时 显示 “新 建文 档 ” 对 话 框 全) 


图 11-14 “新 建文 档 ” 对 话 杠 


> “Unicode 标准 化 表单 ”: 用 Unicode (UTF-8) 作为 默认 编码 时 ， 选 择 Unicode 
标准 化 表单 类 型 。 有 4 种 Unicode 标准 化 表单 ， 最 重要 的 是 标准 化 表单 C， 
为 它 是 用 于 互联 网 的 字符 模型 的 最 第 用 表单 。 

> “包括 Unicode 签名 ”: 在 文档 中 包括 字 节 顺序 标记 (BOM)。UTF-8 没有 字 节 
顺序 ， 因 此 可 以 选择 添加 UTF-8 BOM。 对 于 UTF-16 和 UTF-32, 这 是 必需 的 。 

> ““ 按 Control + N 组 合 键 时 显示 “新 建文 档 ” 对 话 框 ”: 按 Control + N 键 时 显示 
狐 文 档 对 话 框 。 


11.1.14 “复制 /粘贴 ”选项 


在 Dreamweaver CS6 中 可 以 直接 添加 Word 或 Excel 内 容 到 新 建 或 现存 的 网 页 中 ， 但 
其 大 小 不 能 超过 300KB 。 
“复制 /粘贴 ”选项 用 于 设置 复制 /粘贴 Word 或 Excel 内 容 到 Web 网 页 的 方式 。 若 要 
更 改 这 些 参数 ， 可 打开 “首选 参数 ”对 话 框 ， 然 后 单 击 “ 分 类 ” 域 的 “复制 /粘贴 ” 显示 
如 图 11-15 的 对 话 框 。 对 话 框 中 各 选项 的 功能 介绍 如 下 : 
> “ “ 仅 文 本 ”: 粘贴 无 格式 的 文本 。 如 果 原 始 文 本 之 有 格式 ， 所 有 格式 设置 都 被 删 
除 。 
> ““ 带 结构 的 文本 ”: 粘贴 文本 并 保留 结构 ， 但 不 保留 基本 格式 设置 。 如 可 以 粘贴 
文本 并 保留 段落 、 列 表 和 表格 的 结构 ， 但 是 不 保留 粗 体 、 斜 体 和 其 他 格式 设置 。 
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> “市 结构 的 文本 以 及 基本 格式 ”: 可 以 粘贴 结构 化 并 市 简单 HTML 格式 的 文本 ， 
如 段落 和 表格 以 及 市 有 b、i、u、strong、em、hr、abbr 或 acronym 标签 的 格式 
化 文本 。 


复制 /粘贴 


使 用 “编辑 > 粘贴 ”从 其 地 应 用 程序 粘贴 到 设 1 十 视图 : 
〇 芭 交 本 (7) 
〇 带 结构 的 交 本 ( 段落 、 列 表 、 表 格 等 ) (3) 
@ 带 结构 的 交 本 以 及 基本 格式 ( 粗 体 、 斜 体 ) 节 ) 
〇 带 结 构 的 交 本 以 及 全 部 格式 ( 粗 体 、 和 斜体 、 样 式 》(F) 


保留 换行 罕 (R) 
文件 类 型 /编辑 器 回 清 理 Word 段落 间距 (C) 
在 训 览 器 中 预览 回 将 智能 引号 转换 洲 直 引号 外) 
站 点 
字体 


图 11-15 “复制 / 精 贴 ”对 话 框 


> “各 结构 的 文本 以 及 全 部 格式 ”: 可 以 粘贴 文本 并 保留 所 有 结构 、HTML 格式 
设置 和 CSS 样式 。 

> “ “保留 换行 符 ”: 可 保留 所 粘贴 的 文本 中 的 换行 符 。 如 采 选 择 了 “ 仅 文 本 ”， 则 
此 选项 将 被 禁用 。 

> “清理 Word 段 洛 间距 ”: 在 粘贴 文本 时 删除 段 沙 之 间 的 多 余 空 白 。 此 项 只 在 
选择 了 “和 带 结 构 的 文本 ”或 “市 结构 的 文本 以 及 基本 格式 ”时 可 用 。 

> “ “将 智能 引 扎 转换 为 下 引号 ”: 将 智能 引号 〈 通 第 称 为 “ 雪 引 号 ”) 转换 为 下 5 引 

引号 容易 与 字体 的 曲线 泥 淆 ,传统 上 用 于 代表 引号 和 撤 写 ， 直 引号 传统 
尺 和 英寸 的 省 略 形 式 。 


11. 1.15 “文件 比较 ”选项 


利用 Dreamweaver CS6 经 过 优化 的 用 户 工 作 流 程 ， 可 以 消除 一 些 操 作 的 索 琐 。 如 利用 
“文件 比较 ”功能 ， 可 以 在 Macintosh 和 Windows 平台 上 ， 将 最 常用 的 文件 比较 工具 和 
Dreamweaver 结合 使 用 ,快速 比较 文件 以 确定 变更 之 处 。 可 以 比较 两 个 本 地 文件 、 本 地 计 
算 机 上 的 文件 和 远程 计算 机 上 的 文件 ， 或 者 远程 计算 机 上 的 两 个 文件 。 在 比较 文件 之 前 ， 
必须 在 系统 上 安 钱 第 三 方 文件 比较 工具 。 安 猜 文 件 比较 工具 之 后 ,还 必须 在 Dreamweaver 
中 指定 该 工具 。 

打开 “首选 参数 ”对 话 框 ， 然 后 单 击 “ 分 类 ” 域 的 “文件 比较 ” 打开 如 图 11-16 所 
示 的 对 话 框 。 

> 在 Windows 中 ， 单 击 “ 浏 览 ” 按 钮 ， 然 后 选择 用 于 比较 文件 的 应 用 程序 。 

> 在 Macintosh 上 ， 单 击 “ 浏 览 ” 按 钮 ， 然 后 选择 从 命令 行 司 动 文 件 比 较 工 具 的 
工具 或 脚本 ， 而 不 是 实际 的 比较 工具 本 号 。 


上 六 
性 O 
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文件 比较 


选择 要 比较 文件 的 应 用 程序 : 
| 


在 比较 两 个 文件 之 前 ， 
了 解 揭 


实 装 并 选 
的 ” 


择 第 三 方 文 件 比较 实用 程序 。 要 
帮助 "按钮 。 


必须 
解 更 多 信息 ， 清 单 击 下 面 


di 


图 11-16 “文件 比较 ”对 话 框 


11. 1.16 “在 浏览 器 中 预览 ”选项 


此 对 话 和 框 用 于 为 “在 浏览 磺 中 预 归 ”类 别 设置 用 户 参 数 选择 。 此 对 话 框 显示 当前 定 
的 主 浏览 藤 和 候选 浏览 亏 以 及 它们 的 设置 。 奉 要 更 改 这 些 参数 ， 可 打开 “首选 参数 ”对 话 


框 ， 然 后 单 击 “分 类 ” 域 的 “在 浏览 占 中 预 欠 ”显示 如 图 11-17 的 对 话 框 。 


在 训 览 器 中 预 锅 


wg: gj] 口 


IExplore Fl2 


默认 : 轩 主 浏览 器 企 ) 
口 次 浏览 器 (5) 


: 中 使 用 临时 文件 预览 (7) 

选中 此 选项 将 创建 用 于 预 吃 和 服务 器 调试 的 临时 副本 。 要 直接 更 

吉文 同 ; 请 取 销 选中 此 选项 。( 此 选项 不 适用 于 XSLT 伐 件 的 观 
,因为 它 总 是 会 生成 一 个 恪 时 文件 ) 


图 11-17 “在 浏览 郁 中 预览 ”对 话 杠 


LL JelIQeuUO 


删除 当前 人 的 浏览 


> “浏览 器 ee 可 以 单 击 加 号 (十) 添加 浏览 器 , 单 击 减 写 (一 ) 


> ““ 主 浏览 左 ”: 将 当前 的 浏 哆 紫 设置 为 主 浏览 磊 。 按 F12 键 可 打开 主 浏览 亏 进 行 


ey 


预 贤 。 
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> “次 浏览 器 ”: 将 当前 的 浏览 右 设 置 为 候选 浏览 器 。 按 Ctrl+F12 键 可 打开 次 浏 
览 噩 进行 预览 。 

> “使 用 临时 文件 预览 ”: 设置 是 否 为 预 筷 和 服务 器 调试 创建 临时 文件 。 如 末 要 直 
接 更 新 文档 ， 可 撤销 对 此 选项 的 选择 。 


11. 1.17 “站 点 ”选项 


“站 反 ” 参 数 用 于 为 站 操 面 极 设 置 用 户 参 数 选择 。 厂 要 更 改 这 些 参数 ， 可 打开 “ 肯 选 
参数 ”对 话 框 ， 然 后 单 击 “ 分 类” 域 的 “站 点 ”选项 ， 显 示 图 11-18 所 示 的 对 话 框 。 


总 是 显示 GG): | 本 地 文件 ”| 于 0 | 有 
相关 文件 : [vw] 下 载 / 职 出 时 要 提示 加 ) 
上 载 / 存 回 时 要 提示 (I) 
FTP 连接 : [yj 完成 后 空闲 (m】 |30 | 分 钟离 线 
FTF 作业 超时 (07): |30 | 秒 
FTP 传输 选项 : 加 选取 后 继 对 话 惜 中 的 默认 操作 A) |30 2 秒 
代理 主机 6 :| 攻 
代理 端口 @): [21 
上 载 选项 : [| 上载 前 先 保 存 文件 (F) 
移动 选项 : [v| 稀 动 服 备 器 上 的 交 件 前 提示 0) 


图 11-18 “站 点 ”对 话 框 


> “ “总 是 显示 史 指定 始终 显示 哪个 站 点 (远程 或 本 地 )， 以 及 本 地 或 远程 文件 显示 
在 哪个 站 点 面板 窗 格 中 左 窗 格 或 右 窗 格 )。 默 认 情 况 下 ， 本 地 站 点 始终 显示 在 
右 侧 。 未 被 选择 的 那个 窗 格 《默认 情况 下 是 左 窗 格 ) 是 可 更 改 窗 格 ， 可 以 显示 为 
一 个 站 点 (默认 情况 下 是 远程 站 点 ) 的 站 点 地 图 或 文件 。 
> “相关 文件 ”为 浏览 右 加 载 HTML 文件 时 传输 它 加 载 的 相关 文件 (例如 图 像 、 
外 部 样式 表 和 在 HTML 文件 中 引用 的 其 他 文件 ) 显示 提示 。 默认 情况 下 选中 “下 
载 /取出 时 要 提示 ”和 “上 载 / 存 回 时 要 提示 ” 
> “FTP 连接 确定 在 没有 任何 活动 的 时 间 超 出 指定 值 后 ， 是 否 终止 与 远程 站 点 
的 连接 。 
> “FTP 作业 超时 ”指定 Dreamweaver CS6 尝试 与 远程 服务 器 进行 连接 所 用 的 时 
则 。 如 果 在 指定 时 间 长 上 度 内 没有 啊 应 , 则 Dreamweaver CS6 显示 一 个 警告 对 话 框 ， 
提示 注意 这 一 情况 。 
> “ “FTP 传输 选项 ” 确定 在 文件 传输 过 程 中 显示 对 话 框 时 ， 如 果 经 过 指定 的 时 间 
用 户 没 有 啊 应 ，Dreamweaver CS6 是 否 执行 默认 选项 。 
“代理 主机 ”指定 与 外 部 服务 器 连接 所 使 用 的 代理 服务 器 的 地 址 。 
“代理 端口 ” 指 定 通过 代理 中 的 哪个 六 口 与 远程 服务 器 相连 。 如 果 不 使 用 站 口 
21 《FTP 的 默认 如 口 ) 进行 连接 ， 则 需要 在 此 处 输入 端口 号 。 
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LL :SCBYO 


Yor CCVB 守 交 约 全 准 实例 我 在 


> “上 和 载 选 项 ， 上 和 载 前 先 你 存 文件 ”指示 在 将 文件 上 载 到 远程 站 点 前 目 动 保存 未 


保存 的 文件 。 

> “移动 选项 : 移动 服务 器 上 的 文件 前 提示 ”: 指示 在 移动 服务 器 上 的 文件 前 提示 
保存 未 保存 的 文件 。 

> “管理 站 点 ” 启动 “管理 站 点 ”对 话 框 ， 可 以 在 此 对 话 框 中 编辑 现 有 的 站 点 或 
创建 新 站 点 。 


11.1.18 “窗口 大 小 ”选项 


“窗口 大 小 ”参数 选择 控制 状态 栏 的 显示 。 若 要 更 改 这 些 参数 ， 可 打开 “首选 参数 ” 
对 话 框 ， 然 后 单 击 “ 分 类 ” 域 的 “窗口 大 小 ”选项 ， 显 示 如 图 11-19 的 对 话 杠 


窗口 大小 (0): 


平板 电脑 

(1024 x 7T68， 最 大 作 ) 
(1280 x 1024， 最 大 化 ) 
fl440 x 900， 最 大 化) 
fl600 x 1200， 最 大作 ) 


玄 件 头 型 /编辑 器 
新 建立 档 


住 麟 昂 器 中 预览 
站 点 
字体 


连接 速度 (CY: 1384 wv | Eb/ 秘 


图 11-19 “窗口 大 小 ”对 话 框 


“窗口 大 小 ”: 定义 出 现在 状态 栏 弹出 式 亲 蛙 中 的 窗口 大 小 。 

“连接 速度 ”: 确定 用 以 计算 下 载 大 小 的 连接 速度 (以 KB/s 为 单位 ) 。 页 和 面 的 
下 载 大 小 显示 在 状态 栏 中 。 当 在 文档 窗口 中 选 定 一 个 图 像 时 , 图 像 的 下 载 大 小 显 
示 在 属性 检查 闫 中 。 


11.1.19 “W3cC 验证 程序 ”选项 


用 户 可 以 在 Dreamweaver CS6 中 使 用 验证 程序 快速 定位 代码 中 的 标签 或 语法 错误 。 可 
以 在 “验证 程序 ”对 话 框 中 指定 验证 程序 ee 验证 程序 应 该 检 答 
的 特定 问题 以 及 验证 程序 应 该 报告 的 错误 类 型 。 咎 要 更 改 这 些 参 数 ， 可 打开 “首选 参数 ” 
对 话 框 ， 然 后 单 击 “ 分 类 ” 域 的 “W3C I 显示 如 图 11-20 的 对 话 框 。 

> “ ee DOCTYPE， 则 验证 参照 对 象 为 ”列表 框 用 于 选择 要 检 和 奏 的 标 

同 言 内 能 选中 其 中 一 个 版 本 。 

， 选 抒 每 种 要 包括 在 验证 程序 报告 中 的 错误 类 型 的 显示 选项 。 
隐藏 的 错误 和 警告 * : 单 击 “ 管 理 ” 按 钮 弹出 “W3C 验证 程序 隐 蕊 的 
错误 和 警告” 对话 框 ， 在 该 对 话 框 中 可 以 指定 要 隐 关 的 错误 和 和 警告 。 
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> “不 显示 W3C 验证 程序 通知 对 话 框 ”: 在 开始 验证 时 不 显示 “W3C 验证 程序 
通知 ”对 话 框 。 

> Dreamweaver 文 持 作 为 扩展 安装 的 外 部 代码 验证 程序 。 安 状 外 部 验证 程序 扩展 
时 ，Dreamweaver 会 在 “首选 参数 ”对 话 框 的 “验证 程序 ”类 别 中 列 出 其 首选 参 


Y3C 验证 程序 


如 果 没 有 检测 到 D0CTYPE ， 则 验证 参照 对 象 洲 7) : 

口 TML5( 实验 性 ) 
[XHINL 1.0 Strict 
XHINL 1.0 Transitional 
[| XHINL 1.0 Frameset 
[HIML 4.01 Strict 
[] HIML 4.01 Transitional 
[EC HTML 4.01 Frameset 
六] FTWL 3.2 
[ar mn 

显示 : 加 错误 字 ) 

加 Euy 
第 选 : 隐藏 的 错误 和 警 洁 


要 聊 灾 涌 息 ， 请 在 错误 列表 中 单 击 要 隐藏 的 消息 ， 然 后 右键 单 击 以 选 


门 不 显示 W3C 验证 程序 通知 对 话 框 种 ) 


图 11-20 ” “W3C 验证 程序 ”对 话 框 


11.2 动手 练 一 练 


1. 打开 Dreamweaver CS6， 设 置 它 的 基本 属性 ， 观 察 设 置 的 效果 。 
2. 设置 “不 可 见 元 素 ” 选 项 参数 ， 隐 首 标 记 文 档 正 文中 的 JavaScript 或 VBScript 
代码 位 置 的 图 标 。 


11.3 ”思考 题 


使 用 外 部 编辑 器 时 有 哪些 注音 事项 ? 
能 售 将 1M 大 小 的 Word 内 容 下 接 复 制 精 贴 到 Dreamweaver CS6 的 页 面 文件 里 ， 


1. 
5 
为 什么 ? 
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Flash 创建 的 内 容 。 


Adobe DreamWweaver CS6 


® 


安装 配置 IIS 服务 器 
创建 虚拟 目录 
动态 页 创建 流程 
动态 数据 的 相关 操作 
外 部 程序 接口 的 使 用 


®@ 四 © 


的 
* 沪 本 章 时 
和 i W 二 
et: Vn od ee se Dp on a a dd a be Se i 
> 下 、 


| 本 章 简要 介绍 Dreamweaver 的 部 分 动态 网 页 功能 ， 如 安装 配置 |IS 服 | 
; 务 器 、 动 态 页 面 的 创建 流程 、 动 态 数 据 的 配置 、 刷 新 以 及 设置 ， 制 作 动态 文 ， 
; 本 和 动态 图 像 、 数 据 绑 定 ， 以 及 使 用 外 部 程序 接口 直接 使 用 Fireworks 和 


i 
i 
| 
| 
i 
: 
| 
: 
: 
¥ 
| 
| 
| 
| 
: 
i 
: 
| 
| 
E 
de. 
| 
| 


we 


随 看 Internet 的 迅猛 发 展 ， 网 站 开发 者 逐步 以 动态 的 网 站 来 代 巷 静态 的 网 站 ，Web 页 
由 裔 态 隶 步 转 辣 动态 ,所 谓 动 态 丰 指 Web 页 在 传送 过 程 中 , Web 服务 如 能 根据 如 ASP、JSP、 
CGI 等 技术 加 以 修改 ， 然 后 发 送 给 用 户 浏览 器 。 这 种 技术 称 为 服务 器 技术 。 

使 用 Dreamweaver 儿 平 不 用 编写 任何 程序 代码 束 能 开 友 出 功能 强大 的 网 站 应 用 程序 。 
用 户 可 以 直接 使 用 Dreamweaver 可 视 化 的 方式 来 编辑 动态 网 页 ,就 像 编 辑 普 通 网 页 一 样 倍 
单 。 本 章 简 要 介绍 Dreamweaver 的 部 分 动态 网 页 功能 ， 初学 者 可 以 体会 Dreamweaver 在 编 
辑 动态 网 页 方面 的 优势 ， 也 可 以 为 系统 学 习 动 态 网 页 作 一 个 铺 热 。 


12.1 安装、 配置 Web 服务 器 


在 创建 动态 网 页 之 前 ， 首 先 要 安装 和 设置 Web 服务 右 ， 并 创建 数据 库 。 

日 前 网 站 的 服务 器 一 般 安 装 在 Windows NT、Windows 2000 Server 或 Windows XP 操 
作 系 统 中 。 如 果 要 运行 动态 网 站 ， 如 ASP 网 站 ， 还 必须 安装 Web 服务 器 。 推 荐 初学 者 使 
用 IIS (Internet Information Server， 因 特 网 信息 服务 系统 )。 该 服务 器 能 与 Windows 系列 操 
作 系 统 无 颖 结合， 有 旦 操作 简单 。 

IIS 组 件 的 安 闻 步 又 如 下 : 

(1) 在 Windows 操作 系统 中 选择 “开始 ”/“ 欣 制 面 板 ”/“ 添 加 /删除 程序 ”图 标 ， 
弹出 “添加 /删除 程序 ”对 话 框 。 

(2) 单 击 对 话 框 左 侧 的 “添加 /删除 Windows 组 件 ” 选 项 ， 在 弹出 的 “Windows 组 件 
问 导 ”对 话 框 中 双击 组 件 列表 中 的 “Internet 信息 服务 (HIS)” 选 项 ， 在 弹出 的 对 话 框 中 选 
取 需 要 安装 的 服务 ， 建 议 初 学 者 将 可 选 的 服务 全 选 上 。 

(3) 选择 需要 使 用 的 组 件 以 及 子 组 件 后 ， 和 选择“ 确定 ” 投 钮 ， 并 将 对 应 的 操作 系统 
安装 盘 放 入 光驱 内 ， 系 统 开 始 复 制 文 件 。 

(4) 复制 文件 完成 后 ， 单 击 “ 完 成 ”按钮 ，IIS 服务 右 即 安装 完成 。 

安 北 完成 后 ,在 安 北 操作 系统 的 便 盘 目录 下 可 以 看 到 多 了 一 个 名 为 Inetpub 的 文件 夹 。 
接 下 来 介绍 配置 IS 服务 器 的 一 般 步 又。 

(1) 打开 “控制 面板 ”/“ 性 能 和 维护 ”中 的 “管理 工具 ”页 面 ， 双 击 页 面 右 侧 列 表 

中 的 “Internet 服务 管理 右 ” 图 标 ， 打 开 几 12-1 所 示 的 “Internet 信息 服务 ”窗口 。 


| 豆 杆 到 瞪 本 心 可 看 避 入 县 0 
加 | 局 区 团 虽 
ed 


| L 中 便 本 垣 疗 寺 
TS 5.1 


La 二 是 环 丰 叶 评 机 
3 各 I 让 二 叶 直 机) 三 


看 二 版 让 阿 这 
1 二 时 让 SHE 诈 扣 用 吕 图 


图 12-1 ”Internet 信息 服务 窗口 
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ud es 


堪 子 业主 上 江河 习 缠 尘 


ZL JSYQBYD 


De L 守 交 纳 祭 蕉 实例 我 在 


在 “JInternet 信息 服务 ” 窗 窗口 中 可 以 看 到 ， 使 用 HS 可 以 管理 网 站 、 黑 认 SMTP 虚拟 服 
务 器 等 。 


(2) 在 左 侧 窗 格 中 单 击 “ 默 认 网 站 ”市 点 ， 则 右 侧 的 窗 格 中 显示 默认 的 Web 主 目 录 
下 的 目录 以 及 文件 信息 。 如 图 12-2 所 示 。 


"多 Internet 信息 服务 
文件 灾 ) 操作 以 ) 查看 大助 0 
到 国 降 因 了 荡 共 国 星 
多 Internet 信息 服务 人 || 名称 
日 看 二 1INS3MN9219BIB 林地 计 $ Dr Jp e: Wwindows\help\iishelp 


C: “WINDOWS\web ‘printers 
C:\Inetpub\wwwroot\blog 


C:\Inetpub\wwwroot\educati on 
C:\Inetpub\wwwroot\fashi on 
E:\images\chl0 


+ 


地 … 纪 ]… 驻 |… 驴 ]… 驻 


记 j… 录 |… 东 |… 攻 |… 放 |… 让 |] 让] 让]…… 地 ] 


上 | 


图 12-2 “默认 网 站 ” 节 扣 下 的 目录 及 文件 信息 


在 窗口 的 工具 栏 中 有 3 个 控制 服务 的 按钮 。 按 钮 酸 用 于 局 动 项 目 ， 按 钮 硬 用 于 停止 项 
目 ， 按 钮 由 用 于 暂停 项 目 ， 通 过 这 3 个 按钮 控制 服务 器 提供 的 服务 内 容 。 例 如 不 需要 提供 
FTP 服务 ， 就 可 以 选择 “FTP 站 点 ”节点 ， 然 后 单 击 按钮 国 。 
(3) 石 击 “默认 网 站 ” 结 点 ， 从 弹出 的 快捷 菜单 中 选择 “属性 ”命令 ， 打开 “默认 
网 站 属性 ”对 话 框 ， 如 图 12-3 所 示 。 


网 站 | ISAPI 第 选 器 | 主 目录 | 交 档 ”| 目录 安全 性 |‖TTP 头 上 自 定义 错误 | 
网 站 标识 | 
描述 (5): 区 RT | 
IF 地 址 加) : | 证 部 未 分 配 ) vY| | 
TCF 端口 T): | 
连接 
连接 超时 由) : 
加 保持 HTTF 连接 名) 


哆 咎 用 日 志 记 录 它 ) 


活动 日 志 格式 0 : 


Y3C 扩展 日 志 交 件 格式 Y| 


图 12-3 ”设置 默认 网 站 的 属性 
在 此 页 面 中 可 以 设置 站 点 的 I 了 PP 地址 和 TCP 端口， 端口 号 默认 为 80。 一 般 来 说 ， 初 学 
者 不 需要 修改 此 页 面 的 内 容 。 
(4) 单 击 “ 主 目录 ”页 签 ， 切换 到 图 12-4 所 示 的 “ 主 目 录 ” 选 项 卡 。 该 页 面 用 于 设 
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置 Web 站 点 的 主 目 录 ， 即 站 点 文件 的 位 置 。 这 是 配 罗 IS 中 最 重要 的 一 个 选项 。 


网 站 ”| ISAPI 季 选 器 | 主 目录 | 文档 “| 目录 安全 性 | HTTP 头 | 自 定 尺 错误 

连接 到 资源 时 的 内 容 来 源 : 

@ 此 计算 机 上 的 目录 简 ) 

伯 ) 另 一 台 计 算 村 上 的 共享 (8) 

人 重 定向 到 VERLOD 
本 地 路 径 人 C): [ei Ninetpub\wwwroot | 
口 肢 本 资源 访问 () 记录 访问 0 
四 读 职 冲 ) 索引 资源 民 ) 
口 写 入 人) 
品目 录 浏 览 介 ) 
应 用 程序 设置 


应 用 程序 名 W): | 默认 应 用 程序 
开始 位 置 供认 网 站 》 

执行 权限 下 ): 纯 肢 本 | 
应 用 程序 保护 和 i): | 中 民用 ) 司 


] Ca 
Ap 


图 12-4 设置 网 站 的 主 目 孙 


安装 IIS 后，Web 站 点 默认 的 主 目录 是 : 系统 安装 向 付 :\Inetpub\Wwwwroot。 当 然 也 可 
以 将 主 目录 设置 为 本 地 计算 机 上 的 其 他 目录 ， 也 可 以 设置 为 局 域 网 上 其 他 计算 机 的 目录 ， 
或 者 重 定 癌 到 其 他 网 址 ， 只 需 在 “连接 到 资源 时 的 内 容 来 源 ” 区 域 选 中 需要 的 内 容 来 源 ， 
然后 在 下 面 的 文本 框 中 键入 相应 的 路 径 即 可 。 本 书 使 用 默认 的 本 地 路 径 。 

在 此 页 面 中 ， 用 户 还 可 以 在 “执行 权限 ”下 拉 列 表 中 设置 应 用 程序 的 执行 权限 ， 有 以 
下 3 种 选择 : 

@ 无 : 此 Web 站 点 不 对 ASP、JSP 等 脚本 文件 提供 支持 。 

@ 第 脚本 : 此 Web 站 点 可 以 运行 ASP、JSP 等 脚本 。 

@ 脚本 和 可 执行 程序 : 此 Web 站 点 除了 可 以 运行 ASP、JSP 等 脚本 文件 外 ， 还 可 以 

运行 EXE 等 可 执行 文件 。 
(5) 切换 到 “文档 ”选项 卡 中 ， 修 改 浏览 器 默认 的 主页 及 调用 顺序 。 
(6) 设置 完成 后 ， 单 击 “ 确 定 ” 按 钮 关闭 窗口 。 

对 HS 进行 了 基本 的 设置 之 后 ， 还 需要 测试 IS 能 和 否 正常 运行 。 最 简单 的 方法 就 是 直接 
使 用 浏览 器 输入 http:W 和 计算 机 的 耻 地 址 ， 或 输入 http:/localhost 后 按 Enter 键 ， 如 果 可 以 看 
到 IIS 的 缺 省 页 面 或 创建 的 网 站 的 主页 则 代表 IIS 运 行 正 常 。 否则 检查 计算 机 的 人 P 地 址 是 否 
设置 正确 。 


12.2 创建 虚拟 目录 


尺 演 用 户 可 以 随意 设置 网 站 的 主 目录 ,但 是 除非 有 必要 ， 最 好 不 直接 修改 默认 网 站 的 
主 目 录 。 如 果 不 希 望 把 网 站 文件 存放 到 ci:\Inetpub\wwwroot 目录 下 ， 可 以 通过 设置 虚拟 日 
录 来 解决 。 

创建 IS 的 虚拟 目录 可 以 使 用 IS 管理 器 创建 IS 虚拟 目录 ， 或 直接 操作 文件 来。 
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QT (CNB 六 交 级 各 准 实 创 玫 在 
12. 2. 1 使 用 11S 管理 器 创建 虚拟 目录 


(1) 在 “Internet 信息 服务 ”窗口 左 侧 窗 格 中 的 “默认 网 站 ” 结 点 上 单 击 鼠 标 右键 ， 
从 弹出 的 快捷 来 单 中 选择 “新 建 >/ “虚拟 目录 ”命令 ， 打 开 “ 虚 拟 目录 创建 向 导 寻 ” 对 话 框 。 

(2) 单 击 “ 下 一 步 ” 投 钮 ， 在 弹出 寄 口 的 “别名 ”文本 框 中 输入 所 要 建立 的 虚拟 目 
录 的 名 称 。 在 设置 虚拟 目录 的 别名 时 ， 读 者 需要 注意 : 

@ 别名 不 区 分 大 小 写 

@ 不 能 同时 存在 两 个 或 多 个 别名 相同 的 虚拟 目录 。 

(3) 单 击 “ 下 一 步 ” 投 钮 ， 在 弹出 的 对 话 框 中 单 击 “ 浏 览 ” 投 钮 ， 选 择 要 建立 虚拟 
目录 的 文件 夹 。 

(4) 单 击 “下 一 步 ” 按 钮 ， 在 弹出 的 对 话 框 中 设置 虚拟 目录 的 访问 权限 。 

储 访 问 权 限 中 有 “全 取 ”…s “运行 肝 术 ”5 “执行 ”与 入 ”和 “W055 个 这 项 ; 
用 于 设置 用 户 可 通过 浏览 絮 执 行 何 种 操作 : 


令 ” 斌 取 : 最 基本 有 的 一 个 权限 ， 人 允许 用 户 访 问 文件 夹 中 的 普通 文件 ， 如 HTML 文件 、 
GIF 文件 等 。 
令 ”运行 脚本 : 所 谓 的 脚本 惑 是 IIS 中 可 以 执行 的 文件 ， 如 ASP 脚本 程序 等 。 一 般 来 
说 ， 此 权限 都 会 允许 。 
令 ”执行 : 允许 访问 者 在 服务 器 端 运行 CGI 或 ISAPI 程序 。 此 权限 通常 都 不 会 被 允许 ， 
以 免 对 服务 器 问 的 计算 机 造成 不 展 影 啊 。 
争 ” 与 入 : 相对 于 谈 取 ， 另 一 个 权限 设置 瓯 是 写 入 ， 决 定 是 否 允 许 用 户 通过 浏览 项 上 
传 文 件 至 服务 器 的 计算 机 中 。 
仿 浏览 : 所 谓 的 浏览 束 是 当 用 户 没 有 特别 设置 要 读 取 此 Web 站 点 的 哪 一 个 文件 时 ， 
便 列 出 目录 中 的 所 有 子 目录 及 文件 列表 ， 让 用 户 去 选择 浏览 哪 一 个 文件 。 
鉴于 站 点 安全 性 因素 的 考虑 ,“ 写 入 ”和 “浏览 ”两 项 最 好 不 要 选择 ， 除 非 有 特 丈 原 
因 需 要 用 户 回 站 点 目录 写 入 内 容 或 得 看 目录 结构 。 建 议 初 学 者 采用 默认 设置 即 可 。 
(5) 单 击 “ 下 一 步 ” 按 钮 ， 然 后 在 弹出 的 对 话 框 中 单 击 “ 完 成 ”按钮 ， 完 成 虚拟 目 
录 的 创建 。 此 时 ， 在 “Internet 信息 服务 ”窗口 左 侧 的 “默认 网 站 ” 结 点 下 即 可 以 看 到 新 创 
建 的 虚拟 目录 。 


12. 2.2 直接 对 文件 夹 操作 


(1) 在 资源 管理 融 中 右 击 想 要 设置 为 虚拟 目录 的 文件 夹 ， 从 弹出 的 快捷 菜单 中 选择 
“属性 ”命令 ， 打 开 “Web 共享 ”选项 卡 。 

(2) 选中 “ 共 孚 文件 夹 ” 单 选 按钮 ， 弹 出 “编辑 别名 ”对 话 框 。 在 该 对 话 框 中 可 以 
设置 该 文件 夹 的 别名 、 访 问 权 限 和 应 用 程序 权限 。 

(3) 议 置 完毕 之 后 ， 单 击 “ 了 确定” 按钮 关闭 对 话 框 。 此 时 打开 “JInternet 信息 服务 ” 
对 话 框 ， 可 以 在 “默认 网 站 ” 结 点 下 看 到 一 个 刚 创 建 的 虚拟 目录 。 

创建 虚拟 目录 之 后 ， 将 应 用 程序 放 在 虚拟 目录 下 有 以 下 两 种 方法 : 

@ 百 接 将 网 站 的 根 目 录放 在 虚拟 目录 下 面 。 例 如 ， 应 用 程序 的 根 目 录 是 “blog” 下 

接 将 它 放 在 虚拟 目录 下 ， 路 径 为 “[ 硬 等 名 ]: \Inetpub\Wwwwroot\blog”。 此 时 对 应 
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的 URL 是 “http://localhost/blog”。 
@ ”将 应 用 程序 目录 放 到 一 个 物理 目录 下 例如 ，D:\blog)， 同 时 用 一 个 虚拟 目录 指 
问 该 物理 目录 。 

此 时 ， 用 户 不 需要 知道 对 应 的 物理 目录 ， 即 可 通过 虚拟 目录 的 URL 来 访问 它 。 这 样 
做 的 好 处 是 用 户 无 法 修改 文件 ， 一 旦 应 用 程序 的 物理 目录 改变 ， 上 只 需 更 改 虚 拟 目录 与 物理 
目录 之 间 的 上 映射， 仍然 可 以 用 原来 的 虚拟 目录 访问 它们 。 

此 外 ， 初 学 者 需要 注意 的 是 ， 通 过 URL 访问 虚拟 目录 中 的 网 页 时 应 该 使 用 别名 ， 而 
不 是 目录 名 。 例 如 ， 假 设 别 名 为 blog 的 虚拟 目录 对 应 的 实际 路 径 为 E:\mywork\ 
DWCS5\blog ， 要 访问 其 中 名 为 index.asp 的 网 页 时 ， 应 该 在 浏览 器 地 址 栏 中 输入 
http://localhost/blog/index.asp 来 访问 ， 而 个 天 是 使 用 http://localhost/mywork/DWCS5/blog 
/index.asp 来 访问 。 另 外 ， 动 态 网 页 文件 不 能 通过 双击 来 符 看 ， 必 须 使 用 浏览 器 访问 。 


12.3 动态 页 创建 流程 


所 有 的 动态 页 都 源 于 静态 页 。 创 建 一 个 动态 页 可 分 为 5 个 


创建 静态 页 
可 以 使 用 Dreamweaver 中 所 有 的 设计 工具 创建 静态 页 
2 定义 刀 孙 储 
如 果 需 要 使 用 数据 库 , 就 必须 定义 记录 集 ， 以便 从 数据 库 


plc 
[第 一 个 记录 ... 


中 提取 数据 。 所谓 记录 集 ， 是 从 一 个 或 多 个 表 中 提取 的 数据 子 后 一 个 记 


[总 记录 数 ] 


集 ， 一 个 记录 集 也 是 一 张 表 ， 这 是 因为 它 也 具有 相同 的 字段 的 
记录 集合 。 当 碍 询 数据 库 时 可 创建 一 个 记录 集 。 如 图 12-5 所 
示 ， 定 义 的 任何 记录 都 会 添加 到 “ 绑 定 ”面板 的 列表 中 。 图 12-5 “记录 集 

3. 数据 绑 定 

向 数据 绑 定 面板 添加 记录 和 集 后 , 就 可 以 向 Web 页 中 添加 动态 内 容 , 不 需要 考虑 插入 到 
Web ey 出 的 脚本 。 

.激活 动态 页 

人 般 情 况 下 ， 应 该 向 Web 页 添加 服务 器 行为 。Dreamweaver 提供 了 众多 预定 义 的 服 
务 器 行为 。 网 页 设计 人 员 可 以 使 用 预定 义 的 服务 器 行为 ， 也 可 以 使 用 自己 建立 的 服务 器 行 
其 他 人 员 建 立 的 服务 器 行为 。 

.编辑 和 调试 Web 页 

可 根据 需要 编辑 和 调试 Web 页 。Dreamweaver 提供 了 3 种 编辑 环境 : 可 视 化 编辑 
环境 、 活 动 数 据 编 辑 环境 、 代 码 编辑 环境 。 当 然 , 用户 还 可 以 使 用 其 他 的 ASP 调试 工具 进 
行 实时 的 跟踪 调试 。 


12.4 配置 Web 服务 器 


Dreamweaver 的 实时 数据 编辑 环境 能 够 让 网 页 设计 人 员 在 编辑 环境 种 实时 预览 可 编辑 
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moeesar CPOGB 守 这 限 堡 准 守 创 表 各 
数据 的 、 Web 应 用 ， 使 网 页 设计 人 员 在 编辑 网 页 的 同时 可 以 看 到 Web 页 上 的 动态 内 容 ， 以 
便 有 效 地 提 蜗 工作 效率 ， 减 少 和 章 复 六 动 。 

只 有 Dreamweaver 还 无 法 创建 动态 网 页 ， 还 必须 建立 一 个 Web 服务 器 环境 和 数据 库 
运行 环境 。 他 们 之 间 的 关系 为 : 动态 网 页 必须 通过 Web 服务 器 中 的 服务 器 程序 对 数据 库 内 
容 进 行 操 作 ， 而 服务 器 程序 只 有 通过 数据 库 驱 动 程序 才能 够 处 理 数 据 库 。 当 用 户 打 开 实 时 
数据 窗口 时 , 个 打 开 的 文件 临时 拷贝 到 将 被 传输 给 指定 的 Web 服务 器 上 ， 当 产生 的 页 面 在 
实时 窗口 显示 出 来 后 ，Web 服务 右上 临时 找 贝 的 内 容 将 被 删除 。 

Dreamweaver CS6 整合 了 当今 最 新 技术 ， 文 持 当 今 主流 的 开放 环境 和 了 最 新 技术 ， 如 : 
PHP 5、ColdFusion、Web Publishing System、ASP、Flash 视频 和 其 他 主流 的 服务 器 技术 等 。 
在 使 用 Dreamweaver 之 前 必须 选 定 一 种 技术 ， 本 书 选 用 的 残 是 最 利用 的 ASP 服务 器 技术 。 

区 注意 

Cy 在 Dreamweaver CS6 中 ，Adobe 已 弃 用 了 ASP/JavaScript 服务 器 行为 及 相 

关 功 能 

配置 Web 服务 融 的 操作 步骤 如 下 : 

(1) 执行 “站 点 ”/“ 管 理 站 点 ”命令 ， 打 开 “ 管 理 站 点 ”对 话 框 。 

(2) 在 “管理 站 点 ”对 话 框 中 选择 为 应 用 程序 定义 的 站 点 ， 并 音 击 “编辑 ”按钮 ， 
打开 对 应 的 “站 点 设置 ”对 话 框 。 

(3) 在 对 话 框 左 侧 的 分 类 列表 框 中 选择 “服务 器 ”选项 ， 然 后 在 右 侧 的 服务 器 列表 
中 选择 要 配置 的 服务 器 ， 蛙 击 列表 下 方 的 “编辑 现 有 服务 器 ”按钮 盛 ， 打开 图 12-6 所 示 
的 对 话 框 。 


关 点 议 下 对 锡 blog 


服务 器 名 称 ; [blog server | 
连接 方法 : [ 本 地 !/ 网 络 Ea 
服务 器 文件 夹 ; [Cr\Inetpub\blog 加 
Web URL; | http:i/127,0.0,1} 


图 12-6 “站 点 设置 ”对 话 框 


(4) 在 “连接 方法 ”下 拉 列 表 框 中 选择 实时 数据 窗口 显示 动态 页 面 时 连接 Web 服务 
璐 的 方法 。 如 果 选 择 “ 本 地 /网 络 ” 则 在 远程 站 点 中 运行 服务 器 闹 脚 本 。 
(5) 在 “服务 占 文 件 来” 文本 框 中 输入 Web 服务 占 的 虚拟 目录 。 

Dreamweaver CS6 iy 点 设置 。 在 Dreamweaver CS6 中 ， 用 户 可 以 在 一 个 视图 中 
指定 远程 服务 器 和 测试 服务 以 前 所 未 有 的 速度 快速 建立 网 站 ， 分 阶段 
或 联网 站 点 甚至 还 td 务 占 。 

默认 情况 下 ， ol a 定 应 用 程序 服务 器 运行 在 与 Web 服务 器 相 同 的 系统 
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上 上 上。 如果 在 “站 点 设置 ”对 话 框 的 “服务 器 ”类 别 中 定义 了 远程 服务 器 文件 来 ， 并 且 如 末 
应 用 程序 服务 器 运行 在 与 远程 文件 夹 相 同 的 系统 上 【例如 Web 服务 器 和 应 用 程序 服务 器 
均 在 本 地 计算 机 上 运行 ) 或 本 地 根 文件 夹 是 Web 站 点 主 目录 的 子 文 件 夹 ， 则 使 用 测试 服 
务 絮 文件 炎 的 默认 设置 。 

如 果 没 有 定义 远程 服务 器 文件 来 ， 或 本 地 根 文件 来 不 是 主 目录 的 子 文件 夹 ， 则 必须 将 
本 地 根 文 件 夹 定义 为 Web 服务 器 中 的 虚拟 目录 ， 测 试 服务 器 文件 夹 默 认为 在 “站 点 ”类 
别 中 定义 的 本 地 站 点 文件 夹 。 

(6) 在 “Web URL” 文 本 框 中 输入 用 户 在 浏览 器 中 打开 Web 应 用 程序 时 需要 键入 
的 URL， 不 包括 任何 文件 名 。Dreamweaver 使 用 Web URL 创建 站 点 根 目 录 相 对 链接 ， 
并 在 使 用 链接 检查 器 时 验证 这 些 链 接 。 

Web URL 由 域名 和 Web 站 点 主 目录 的 任何 一 个 子 目 录 或 虚拟 目录 《而 不 是 文件 名 ) 
组 成 。 例 如 ， 如 果 应 用 程序 的 URL 是 http://www.adobe.com/mycoolapp/start.asp， 则 Web 
URL 为 : www.adobe.com/mycoolapp/。 如 果 Dreamweaver 与 Web 服务 器 在 同一 系统 上 运 
行 ， 可 以 使 用 localhost 作 为 域名 的 占 位 符 。 人 例如， 如果 运行 的 是 HS， 而 应 用 程序 的 URL 
是 http://buttercup_pc/mycoolapp/start.jjsp， 则 Web URL 为 : http://localhost/mycoolapp/。 

区 注意 

如 果 您 的 发 布 站 点 是 本 地 计算 机 ， 可 以 在 “Web URL” 文 本 框 中 输入 

http: //1ocalhost/ 后 加 入 站 点 名 。 有 时 候 创建 的 动态 页 面 在 实时 数据 窗口 可 以 实时 

浏览 ， 但 是 上 传 到 服务 器 后 ， 在 浏览 器 中 不 能 正常 显示 ， 这 是 初学 者 常常 感到 困惑 的 

地 方 。 此 时 可 以 在 “Web URL” 文 本 框 中 输入 http: //127. 0. 0.1/ 即 可 在 浏览 器 中 正常 

显示 。 

(7) 切换 到 “局 级 ” 屏 磊 ， 在 “服务 占 模 型 ”后 面 的 下 拉 列 表 框 中 选择 合适 的 服务 
骼 模式 ， 如 ASP、JSP 或 Cold Fusion。 如 朱 选 择 ASP 服务 器 ， 还 要 选择 一 种 脚本 语言 ， 如 
12-7 所 示 。 


靖 点 识 置 对 象 blog 


大 本 | 夺 朋 | 
远程 服务 器 
苛 维 护 同 步 信息 
口 保存 时 自动 将 文件 上 传 到 服务 器 
口 自用 文件 职 出 功能 
Vi 打开 立 件 之 前 取出 
取出 名 称 : 
电子 邮件 地 址 ; 


测试 服务 器 
服务 器 模型 ， 
人 


图 12-7 选择 服务 器 模型 
(8) 单 击 “ 保 存 ” 按 钮 关闭 对 话 框 。 
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0 COD 守 交 改 各 准 会 创 冰 和 


所 有 的 动态 网 页 都 源 于 静态 网 页 ， 可 以 将 静态 网 页 中 的 文本 转换 为 动态 文本 ， 或 者 二 
接 将 动态 文本 放置 在 网 页 中 的 茶 一 点 处 。 动 态 文本 将 继承 被 蔡 换文 本 的 文本 格式 或 插入 点 
的 格式 ,例如 选择 的 文本 已 经 设置 了 CSS 风格 , 则 符 换 该 文本 的 动态 内 容 也 继承 了 该 CSS 
风格 。 也 可 以 通过 Dreamweaver 的 文本 格式 化 工具 改变 或 者 添加 动态 文本 的 格式 。 还 可 以 
对 动态 文本 使 用 数据 格式 ， 例 如 如 末 数 据 中 包括 日 期 ， 束 可 以 定义 特殊 的 日 期 格式 。 

创建 动态 文本 的 共 体 的 操作 步骤 如 下 : 

(1) 执行 “窗口 ”/“ 绑 定 ” 人 命令， 打开 “ 绑 定 ”浮动 面板 。 

(2) 确认 “ 绑 定 ”面板 的 数据 源 列 表 中 是 否 有 需要 的 数据 源 。 如 果 没 有 ， 可 以 通过 
单 击 男 | 按钮 新 建 一 个 需要 的 数据 源 。 

(3) 在 文档 窗口 或 者 动态 数据 窗口 中 ， 选 择 网 页 中 需要 杖 换 的 文本 ， 或 者 单 击 害 要 
增加 动态 文本 的 地 方 。 

(4) 在 数据 绑 定 面板 中 ， 从 列表 中 选择 一 个 数据 源 。 对 于 记录 集 类 型 的 数据 源 ， 选 
择 想 要 插入 的 字段 。 

(5) 将 数据 源 拖 到 网 页 上 ， 这 时 文件 窗口 会 出 现 占 位 符 蔡 换 选 择 的 文本 或 在 插入 点 
直接 显示 占 位 和 从。 

在 一 般 情 况 下 ， 占 位 符 语 法 形式 为 {记录 集 名 称 .Column}、{Request.Variable} 和 等 ， 其 中 
Column 表示 从 记录 集中 选择 域 的 名 称 ，Request.Variable 表示 从 客户 问 表 单 上 所 传递 过 来 
的 信息 。 可 以 选择 “人 查看”/“ 动 态 数据 ”命令 ， 在 动态 数据 窗口 中 进行 实时 浏览 。 

如 果 和 需要 ， 可 以 为 动态 文本 指定 数据 格式 。 例 如 ， 如 果 数 据 库 中 包 售 日期， 可 以 通过 
在 “ 绑 定 ”和 面板 中 蛙 击 选择 域 后 面 的 二 | 按钮 ， 从 弹出 的 琳 持 中 选择 “日 期 /时 间 ” 命 令 ， 
从 弹出 的 子玉 单 中 选择 一 种 日 期 格式 。 

下 面 通 过 创建 一 个 计数 占 的 示例 进一步 说 明 如 何在 网 页 中 添加 动态 内 容 。 

0 执行 “文件 ”/“ 狐 建 ” 命 令 ， 新 建 一 个 ASP 文件 。 
02 在 文档 窗口 中 输入 “欢迎 光临 我 的 个 人 主页 ! 您 是 访问 我 们 的 第 **#* 位 客户 1” 
03 选择 “窗口 ”/“ 绑 定 ” 命 令 打 开 “ 绑 定 ” 浮 动 面板 ， 单 击 男 | 按钮， 从 弹出 的 下 
拉 荣 单 中 选择 “应 用 程序 变量 ”命令 ， 弹 出 “应 用 程序 变量 ”对 话 框 ， 在 该 对 话 框 中 输入 
变量 的 名 称 counter。 
04 切换 到 “代码 ”视图 窗口 ， 在 <html> 之 前 加 入 如 下 代码 : 
<% 
Application("counter")=Application("counter")+1 
%> 
03 这 样 在 “ 绑 定 ”面板 中 的 可 用 数据 源 列 表 中 又 增加 一 行 。 在 文档 窗口 中 用 鼠标 
选择 “*###” 尝 样 ， 然 后 在 “ 绑 定 ”面板 选择 刚才 定义 的 应 用 程序 变量 ， 再 单 击 “ 绑 定 ” 
面板 撒 部 的 “插入 ”按钮 。 则 “*#*” 将 被 [Application.counter} 占 位 符 代 符 ， 如 网 12-8 所 
No 
06 选择 “文件 ”/“ 保 在” 命令 ， 将 修改 后 文档 保存 到 本 地 站 点 中 。 然 后 将 该 文件 
重新 上 传 到 远程 服务 右上。 
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0 全 打 开 浏 览 右 ， 在 地 址 栏 中 输入 刚才 保存 文件 的 URL 地 址 久 会 打开 ASP 页 面 。 
每 里 击 一 次 “刷新 ”按钮 ， 束 可 以 看 到 下 面 的 计数 占 的 数值 会 增加 1。 


画 Untitled-6 (XHTNL)* 可 这 
ee 人 
je AP wu 
“~y 
ni RN SE 
欢迎 网 临 我 险 个 人 学 页 ! 
. 
您 是 访问 我 们 阳 
> 
bodv> [Kp [RJ] Q 100% vx 回国 [四 


图 12-8 ”将 记录 绑 定 到 页 面 上 


对 刚 创 建 的 网 站 ， 由 于 没有 太 多 的 宣传 ， 每 天 的 访问 量 可 能 不 大 。 这 时 可 以 通过 改变 
Application("counter") 的 数值 ， 显 示 较 多 的 访问 量 。 将 第 4 步 输入 为 : 

<% 

Application("counter")=Application("counter")+1 
%> 
源 代 码 访 变 为 : 
<% 

If Application("counter")< 999 then 

Application("counter")=999 

End |f 

Application("counter")=Application("counter")+1 
Yo> 


这 样 该 网 页 被 访问 时 ， 计 数 器 数字 从 1000 开始 。 
12.6 动态 图 像 


如 果 您 经 党 在 网 上 购物 ， 可 以 发 现 每 一 个 网 页 基本 上 都 包括 一 件 商 品 的 照片 和 摘 述 该 
商品 的 文本 。 网 页 的 布局 保持 不 变 ， 经 常 变 换 的 是 商品 的 照片 和 描述 该 商品 的 文本 。 使 用 
Dreamweaver 实现 这 种 功能 很 容易 ， 其 具体 的 操作 步 又 如 下 : 

(1) 新 建 一 个 文档 或 打开 一 个 需要 创建 动态 图 像 的 文档 。 
(2) 将 光标 放置 在 需要 插入 动态 图 像 的 位 置 。 选 择 “ 插 入 ”/“ 图 像 ” 命 令 。 
(3) 在 弹出 的 “选择 文件 ”对 话 框 中 的 “从 文件 名 称 选 择 ” 后 面 有 两 个 单 选 按钮 ， 
因为 要 插入 动态 图 像 ， 所 以 选择 “数据 源 ” 单 选 按钮 ， 此 时 对 话 框 中 会 将 数据 源 列 出 。 
(4) 从 该 数据 源 列表 中 选择 一 个 需要 的 数据 源 。 在 URL 中 输入 数据 源 的 路 径 。 路 径 
可 以 是 绝对 路 径 ， 也 可 以 是 相对 于 当前 目录 的 路 径 或 者 是 基于 根 目录 的 路 径 ， 这 主要 依赖 
于 站 点 的 文件 结构 决定 。 
(5) 设置 完成 后 ， 单 击 “ 确 定 ” 按 钮 关闭 该 对 话 框 ， 完 成 操作 。 
(6) 选择 “文件 ”/“ 保 存 ” 命 令 ， 将 该 文件 保存 。 
使 用 Dreamweaver 还 可 以 方便 地 创建 其 他 动态 对 象 ， 例 如 表单 元 素 等 ， 有 兴趣 的 谈 者 
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要 闻 烧 吝 淋 汝 加 济 半 


里 
二 
i 
ti 
@ 
一 人 
N 


oavor COGG 宁 文 股 行 淮安 创 取 让 


可 以 阅读 Dreamweaver 的 帮助 文件 或 其 它 相关 书籍 。 利用 Dreamweaver 外 E 很 方便 地 制作 出 
第 见 的 动态 网 页 ， 由 于 本 书 篇 幅 限 制 在 此 不 能 一 一 详解 。 


12.7 ”数据 绑 定 


Dreamweaver 可 以 为 用 户 页 面 中 的 对 象 绑 定 动态 内 容 。 数 据 绑 定 解决 了 与 服务 喜 访 问 
数据 库 有 关 的 问题 .用 户 可 以 把 HTML 对 象 绑 定 到 来 自 一 个 源 文件 的 数据 上 ， 当 该 页 面 被 
加 载 时 ， 页 面 会 日 动 从 源 文件 中 提取 数据 ， 然 后 在 该 元 了 内 进行 格式 化 并 显示 出 来 。 用 户 
不 需要 编写 任何 代码 ， 只 需要 拖 动 网 页 元 素 ， 就 可 以 插入 动态 文本 或 图 像 ， 将 它们 与 表单 
对 象 、 列 表 或 其 他 网 页 对 象 相 链接 。 

在 使 用 数据 绑 定 将 动态 内 容 添 加 到 网 页 之 前 ， 必 须 建立 一 个 数据 库 连 接 ， 否 则 
Dreamweaver 无 法 使 用 数据 库 作 为 动态 页 面 的 数据 源 。 而 在 建立 数据 库 连 接 之 前 必须 建 芯 
一 个 DSN 指 问 数据 库 的 快捷 方式 ， 它 包含 数据 库 连 接 的 一 切 信 息 。 


12. 7. 1 创建 数据 库 连 接 


要 在 网 页 应 用 程序 中 使 用 数据 库 ， 必 须 创 建 数据 库 和 连接。 在 建立 连接 时 必须 选择 一 种 
合适 的 连接 类 型 ， 如 ADO、JDBC 或 Cold Fusion。 下 而 介绍 在 Dreamweaver 使 用 数据 源 
名 称 建立 数据 库 连 接 的 一 般 方 法 。 

(1) 选择 “窗口 ”/“ 数 据 库 ” 命 令 ， 打 开 图 12-9 所 示 的 “数据 库 ” 浮 动 面 板 。 

(2) 单 击 该 对 话 框 中 的 到 按钮 ， 从 弹出 的 下 拉 染 单 选 择 “ 数 据 源 名 称 (DSN )” 命 令 ， 
打开 “数据 源 名 称 (DSN)” 对 话 框 ， 如 图 12-10 所 示 。 
数据 库 | 乡 害 服务 器 Busine 。 乡 | 三 | 


十 一 站 档 类 型 : ASF VESeript G 


= 国 myconn 
下- 团 。 脚本 编制 


届 - 办 视图 数据 源 名 称 (D5H) 


中“… 半 导 ”预存 过 程 


连接 名 称 : 
数据 源 名 称 DSN): Ee 
用 户 名 : 
密码 : | _ 
r 应 连接 : 〇 使 用 测试 服务 器 上 的 DSH 
@) 使 用 本 地 DSH 


图 12-9 “数据库 ”面板 图 12-10 “数据 源 名 称 (DSN)” 对 话 框 


注意 
一 在 “数据 库 ， 面板 中 可 以 看 到 有 4 个 步骤 ， 只 有 前 3 个 步骤 完成 了 才能 进 
行 创建 连接 的 操作 。 
(3) 在 “连接 名 称 ” 文 本 框 中 输入 连接 的 名 称 〈 一 般 可 以 输入 “conn+ 数 据 库 名 称 ” 
作为 连接 的 名 称 ) 
(4) 在 “数据 源 名 称 (DSN)” 下 拉 列 表 框 中 选择 一 个 数据 源 名 称 
的 数据 源 名 称 ， 则 单 击 “定义 ”按钮 创建 一 个 数据 源 。 创建 数据 源 的 具体 步 又 参见 下 节 的 
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> 
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(5) 在 “用 户 名 ”和 “密码 ”后 面 的 文本 框 中 分 别 输入 用 户 名 及 密码 。 
(6) 选择 “使 用 本 地 DSN” 单 选 按钮 ， 

(7) 单 击 “ 测 试 ”按钮 检测 连接 是 否 建 立成 功 。 

(8) 连接 成 功 后 ， 单 市 “确定 ”按钮 ， 返 回 到 “数据 库 ”面板 ， 

此 时 ， 在 “数据 库 ”面板 中 可 以 看 到 新 建立 的 连接 。 如 图 12-11 所 示 。 
数据 库 | 纤 完 服务 器 | Busins|  》 | 号 


十 一 训 档 类 型 : ASF VESeript G 


图 12-11 己 创 建 的 数据 库 连 接 


单 击 对 象 前 面 的 折 车 图 标 ， 可 以 展开 各 项 查看 数据 库 的 各 个 对 象 。 
通过 DSN 数据 源 连 接 SQL Server 数据 库 与 连接 Access 数据 库 相 差不多 ， 有 兴趣 的 读 
者 可 以 目 行 练习 。 


12. 7.2 编辑 数据 库 连 接 


当 编 辑 或 删除 数据 库 连 接 后 ， 必 须 及 时 更 新 页 面 中 的 内 容 。 
名 要 编辑 数据 库 连 接 的 操作 方法 如 下 : 
(1) 选择 “窗口 ”|“ 数 据 库 ”命令 ， 打 开 图 12-10 所 示 的 “数据 库 ” 浮 动 面板 。 
(2) 从 数据 库 连 接 列 表 中 选择 一 个 需要 编辑 的 连接 ， 然 后 双击 该 数据 库 连 接 的 名 称 ， 
打开 “数据 源 名 称 (DSN)” 对 话 框 。 
如 采 已 创建 的 数据 源 是 采用 目 定 义举 符 串 定义 的 ， 则 打开 “上 自 定 义学 符 串 ” 对 话 框 。 
(3) 对 数据 库 进 行 必要 的 修改 后 单 击 “ 确 定 ” 按 钮 。 
由 于 该 连接 被 改动 ,所 以 必须 为 每 一 个 使 用 该 连接 记录 集 的 页 面 指定 一 个 改动 后 的 连 
接 : 打开 每 一 个 使 用 该 连接 记录 集 的 页 面 。 选 择 “ 窗 口 ” |“* 绑 定 ”命令 打开 “ 绑 定 ”面板 。 
双击 记录 和 集 名 ， 打 开 对 应 的 “记录 和 集 ”对 话 框 。 从 “连接 ”下 拉 列 表 框 中 选择 修改 后 的 连 
接 ， 然 后 单 击 “确定 ”按钮 即 可 更 新 页 面 中 的 内 容 。 
如 果 要 删除 数据 库 连 接 ， 请 执行 以 下 操作 : 
(1) 在 “数据 库 ” 面板 中 ， 从 数据 库 连 接 列表 中 选择 一 个 需要 删除 的 连接 ,， 单 击 二 | 忱 
钮 出 现 询 问 是 人 否 删除 连接 对 话 框 ， 单 击 “ 是 ”按钮 即 可 删除 该 连接 。 
由 于 该 连接 被 删除 ， 所 以 必须 为 每 一 个 使 用 该 连接 记录 集 的 页 面 指定 一 个 新 的 连接 。 
(2) 打开 每 一 个 该 连接 记录 集 的 页 面 。 
(3) 选择 “窗口 ”|“ 绑 定 ” 命 令 打 开 “ 绑 定 ” 面 板 。 打 开 对 应 的 “记录 集 ” 对 话 框 。 
从 “连接 ”下 拉 列 表 框 中 选择 修改 后 的 连接 ， 单 击 “确定 ” 按 钮 ， 即 可 重新 建立 数据 库 连 
接 。 


12.7.3 定义 数据 源 
如 果 还 没有 定义 ODBC 数据 源 ， 可 以 按照 以 下 步骤 创建 一 个 ODBC 数据 源 。 
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党 理 桌 ”对 话 框 。 


(1) 选择 “窗口 ”/ < 数据库， 全 命令 ， 二 12-9 a 9 浮动 面板 。 
(2) 单 击 该 对 话 框 中 的 “+” 号 按钮 ， 从 弹出 的 下 拉 荣 单 选择 “数据 源 名 称 (DSN)” 


命令 ， 打 开 “ 数 据 源 名 称 


(DSN)” 对 话 框 ， 如 图 12-10 所 示 。 


(3) 单 击 “ 数 据 源 名 称 ” 右 侧 的 “定义 ” 控 钮 ， 弹 出 图 12-12 所 示 的 “ODBC 数据 源 


人 ODBC 数据 源 管 理 和 去 


用 户 DSH 系统 DSN | 文件 DsH# | 驱动 程序 | 跟踪 ”| 连接 池 | 关于 | 
系统 数据 源 (5): 
驱动 程序 添加 0m)... | 


0DBC 系统 
名 中 


图 12-12 “ODBC 数据 源 管理 器 ”对 话 框 


(4) 单 击 对 话 框 项 部 的 “系统 DSN ”页 签 ， 切 换 到 “系统 DSN ”页 面 ， 单 击 “ 添 加 ” 
按钮 ， 在 弹出 的 图 12-13 所 示 的 “创建 新 数据 源 ” 对 话 框 中 选择 需要 的 数据 源 驱 动 程序 。 


本 例 选 择 “Microsoft Access Driver”。 


框 。 
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图 12-13 “创建 新 数据 源 ” 对 话 框 


(5) 单 击 “完成 ”按钮 ， 弹 出 图 12-14 所 示 的 “ODBC Microsoft Access 安装 ”对 话 


ODBC icrosoft Access 安装 


数据 源 名 0): | 
说 明 0D): | - 
数据 库 取消 


站 了 _ 下 助 00 | 
选择 (5).. .| 时 C0)... | 修复 8)... | 压缩 遇 .… | 高 级 WW. | 


-系统 数据 计 


全 无 FE) 
个 数据 库 (T): 


选项 (0)>> | 


图 12-14 “ODBC Microsoft Access 安装 ”对 话 框 


(6) 在 “数据 源 名 ”文本 框 中 键入 数据 源 的 名 称 。 在 “说 明 ” 文 本 框 中 键入 数据 源 
的 备注 说 明 。 然 后 单 击 “数据 库 ” 区 域 的 “选择 ”按钮 ， 在 弹出 的 “选择 数据 库 ” 对 话 杠 
中 选择 需要 的 数据 库 ， 单 击 “ 确 定 ” 按 钮 天 财 对 话 框 。 

(7) 返回 到 “ODBC 数据 源 管 理 嚣 ”对话 框 时 ， 读 者 可 以 发 现 新 创建 的 数据 源 名 称 。 

(8) 单 击 “ 确 定 ”按钮 ， 关 闭 对 话 框 。 

全 此 ， 数 据 源 创建 守成 。 此 时 在 图 12-11 所 示 的 “数据 源 名 称 ” 下 拉 列 表 中 可 以 看 到 
独创 建 的 数据 源 。 


12. 7.4 定义 记录 集 


如 果 和 需要 在 应 用 程序 中 使 用 数据 库 ， 必 须 通 过 记录 集 这 个 中 介 媒 体 让 数据 库 和 网 页 应 
用 程序 关联 起 来 。 
记录 集 是 通过 数据 库 查 询 得 到 的 数据 库 中 记录 的 子 集 ， 它 由 查询 定义 。 查 询 则 由 搜索 
条 件 组 成 ， 这 些 条 件 决定 记录 集中 应 该 包含 什么 ， 不 应 该 包含 什么 。 为 了 改善 应 用 程序 的 
性 能 ， 在 定义 记录 集 时 应 尽量 包含 应 用 程序 需要 的 数据 域 和 记录 。 
(1) 选择 “窗口 ”/“ 文 件 ” 命 令 ， 打 开 “ 文 件 ” 窗 口 ， 在 “文件 ”窗口 左上 和 角 的 下 
拉 列 表 中 选择 需要 的 站 点 之 后 ， 在 文件 列表 中 双击 需要 绑 定 数据 的 文件 打开 。 
(2) 选择 “窗口 ” /“ 绑 定 ” 命 令 打 开 “ 绑 定 ” 浮 动 面板 ， 单 击 面板 左上 角 的 而 | 按钮 ， 
从 弹出 的 下 拉 且 里 中 选择 “记录 和 集 (查询 )” 命 令 ， 弹 出 “记录 和 集 ” 对 话 框 。 
(3) 在 “名 称 ” 文 本 框 中 输入 记录 集 的 名 称 。 记 录 集 名 称 中 不 能 使 用 空格 或 特殊 孚 
符 ， 一 般 可 以 使 用 “rs+ 数 据 库 名 称 ” 以 便 与 其 他 对 象 区 别 开 来 ， 如 rsudbookdatal。 
(4) 在 “连接 ”下 拉 列 表 框 中 选择 一 个 数据 库 连 接 。 如 和 果 列 表 中 没有 数据 库 连 接 ， 
可 以 单 击 “ 定 义 ” 投 钮 建立 一 个 数据 库 连 接 。 
(5) 在 “表格 ”下 拉 列 表 杠 中， 选择 一 个 需要 的 表 ， 在 “ 列 ” 选 项 的 单 选 按钮 中 选 
择 相应 的 单 选 按钮 。 
如 果 选 择 “ 全 部 ” 则 可 以 使 用 该 表 中 所 有 字段 作为 一 个 记录 集 。 
如 有 条 选择 “ 选 定 的 ” 则 可 以 从 下 面 的 字段 列表 框 中 选择 需要 的 学 段 作 为 一 个 记录 集 。 
(6) 在 “人 沛 选 ” 选 项 中 可 以 对 表 中 的 记录 过 小 。 在 第 一 个 下 拉 列 表 框 中 选择 与 定义 
标准 值 对 应 的 字段 ; 在 第 二 个 下 拉 列 表 框 中 选择 条 件 表 达 符 号 ， 使 每 一 条 记录 的 值 与 标准 
值 进行 比较 ; 在 第 三 个 下 拉 列 表 杠 中 选择 Entered Value 或 其 他 参数 ， 如 URL Parameter、 
Form Variable、Cookie、 阶 段 变 量 或 应 用 程序 变量 等 ， 在 第 四 个 文本 杠 中 输入 标准 值 。 
(7) 如 末 需 要 进行 记录 排序 ， 可 在 “排序 ”下 拉 列 表 框 中 选择 按 哪 个 字段 排序 ， 然 
后 在 后 面 的 文本 框 中 设 定 排序 方式 。 
(8) 单 击 “ 测 试 ” 按 钮 测试 记录 集 ， 出 现 从 数据 库 中 提取 的 包含 数据 的 记录 集 ， 如 
图 12-15 所 示 。 
(9) 单 击 “测试 SQL 指令 ”对 话 框 中 的 “确定 ”按钮 关闭 该 对 话 框 。 
(10) 单 击 “ 记 录 集 ”对 话 框 中 的 “确定 ”按钮 ,关闭 “记录 集 ” 对话 框 。Dreamweaver 
将 把 记录 集 添加 到 数据 绑 定 面板 的 可 用 数据 源 列 表 中 。 


12.7.5 定义 变量 


使 用 数据 绑 定 面板 可 以 很 方便 地 定义 URL Variable (URL 地 址 变量 )、Form Variable 
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(地 址 变量 )、Client Variable (客户 地 址 变量 )、 阶 段 变量 、 请 求 变 量 以 及 应 用 程序 变量 等 
变量 。 


ipl ip2 country 
3758096383 3774873598 
3714175487 3714175742 
3674431743 3674431998 
3661851903 3661853694 
3661850623 3661851902 
3661847807 3661848318 
3661844735 3661846014 
3661837823 3661839358 
3661754367 3661755390 
3661632255 3661633534 
3661631999 3661632254 
3661629951 3661631998 
3661627391 3661629950 
3661625343 3661625854 省 红河 哈 尼 诸 只 诸 自 . 
3661580543 3661581310 省 曲靖 市 ( 富源 ) 
3661567999 3661569790 省 红河 哈尼 族 葵 幅 自 . 
3661566207 3661567230 省 亿 山 壮 谈 苗 谈 自演 . 
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3661542655 3661543166 省 西 站 版 纳 僚 族 自治 . 
3661529599 3661532414 省 曲靖 市 
3661382143 3661385726 辽宁 省 沈阳 市 
3661378047 3661379838 辽宁 省 沈阳 市 v 
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图 12-15 “测试 SQL 指令” 对话 框 


定义 请 求 变 量 


请 ee 可 以 用 来 从 客户 浏览 右 站 传送 到 服务 紫 妆 中 的 数据 中 获取 信息 。 如 在 交互 表 


单 中 ， 蛙 用 户 输 入 表单 数据 ， 单 击 “ 近 交 ” 按 钮 ， 这 些 表单 数据 将 传送 到 服务 右 咽 ， 此 时 


请 求 变 量 将 获取 客户 冰 的 数据 。 定 义 请 求 变 量 的 步骤 如 下 : 

(1) 选择 “窗口 ”/“ 绑 定 ” 琳 蛙 命 令 ， 打 开 “ 绑 定 ” 和 耐 板 。 

(2) 单 击 “ 绑 定 ” 面板 左上 角 的 国 蚁 全 从 弹出 的 下 拉 肖 单 中 选择 “请 求 变 量 ” 命 
弹出 “请 求 变 量 ” 对 话 框 。 

(3) 在 “类 型 ”下 拉 列 表 框 中 选择 请 求 变 量 的 类 型 ， 如 图 12-16 所 示 。 
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Request. HuervyStrine 
Request. Form 
Request. ServerVariables 
Request. ClientCertificates 


图 12-16 “请 求 变 量 ” 对 话 框 


该 下 拉 列 表 框 中 提供 了 6 种 类 型 ， 其 意义 分 别 如 下 : 


Request: 用 来 获取 任何 基于 HTTP 请 求 传递 的 所 有 信息 ， 包 括 从 HTML 表单 
用 POST 方法 或 GET 方法 传递 的 参数 、cookie 和 用 户 认证 。 

RequestCookie: 用 于 获取 在 HTTP 请 求 中 发 送 的 cookie 的 值 ， 或 获取 客户 冰 
存储 的 Cookie 值 .Cookie 是 一 个 标签 , 是 一 个 唯一 标识 客户 的 标记 。 每 个 Web 站 
点 都 有 自己 的 标记 ， 标 记 的 内 容 可 以 随时 读 取 ， 但 上 只 能 由 该 站 点 的 页 面 完成 。 
个 Cookie 可 以 包含 在 一 个 对 话 期 或 几 个 对 话 期 之 则 某 个 Web 站 点 的 所 有 页 和 面 
共享 的 信息 。 使 用 Cookie 还 可 以 在 页 面 之 间 交 换 信 息 。 

RequestQueryString: 检索 HTTP 得 询 字 符 串 中 变量 的 值 ，HTTP 得 询 字 符 串 由 
问号 后 的 值 指定 。 


@ Request.Form: 用 于 获取 客户 端 表单 上 传送 给 服务 器 关 的 数据 。 

@ Request.ServerVariable: 获取 客户 闫 信息 以 做 出 啊 应 。 如 可 以 使 用 Request.Server 
Variable("REMOTE_ADDR") 获 取 用 户 的 全 地 址 ; 使 用 <%=Request.Server Variable 
("REMOTE_ADDR")%> 语 句 使 用 该 IP 地 址 。 

@ Request.ClientCertificate: 用 于 获取 客户 端的 身份 认证 信息 。 

(3) 在 “名 称 ” 文 本 框 中 输入 请 求 变 量 的 名 称 。 

(4) 单 击 “ 确 定 ” 按 钮 即 可 完成 操作 。 

2. 定义 阶段 变量 

当 客 户 在 Web 站 点 的 网 页 之 则 来 回 移动 时 , 可 以 使 用 阶段 变量 作为 跟踪 客户 信息 的 一 
种 方法 。 在 创建 会 话 时 ， 服 务 喜 会 为 每 一 个 会 话 生 成 一 个 单独 的 标识 。 会 话 标识 以 长 整形 
数据 类 型 返回 。 在 多 数 情 况 下 阶段 变量 可 用 于 Web 页 和 耐 注册 统计 。 

(1) 单 击 “ 绑 定 ” 面 板 左 上 角 的 加 上 按钮， 从 弹出 的 下 拉 菜 单 中 选择 “阶段 变量 ” 命 
令 ， 弹 出 图 12-17 所 示 的 “阶段 变量 ”对 话 框 。 

(2) 在 “名 称 ” 文 本 框 中 输入 “阶段 变量 ”的 名 称 ， 单 击 “ 确 定 ” 按 钮 即 可 完成 操 
1 

如 果 要 使 用 阶段 变量 存储 访问 者 的 昵称 并 在 网 页 中 显示 ， 则 可 以 在 “阶段 变量 ”对 话 
框 中 输入 昵称 的 变量 名 (例如 username)， 并 早 击 “确定” 按钮。 这 种 操作 的 功能 与 在 源 
代码 中 写 入 Session 〈"username") 的 功能 一 样 。 
3. 定义 应 用 程序 变量 
在 同一 个 虚拟 目录 及 其 子 目录 下 的 所 有 .asp 文件 构成 了 ASP 应 用 程序 。 可 以 使 用 应 
用 程序 变量 在 给 定 应 用 程序 的 所 有 用 户 之 间 共 侍 信 息 ， 并 在 服务 器 运行 期 间 持久 地 你 存 数 
据 。 也 可 以 使 用 应 用 程序 变量 控制 访问 应 用 层 数据 的 方法 和 可 用 在 应 用 程序 局 动 和 俘 止 时 
触发 过 程 的 事件 。 

(1) 单 击 “ 绑 定 ” 面 板 上 的 蜀 按 钮 ， 从 弹出 的 下 拉 菜 单 中 选择 “应 用 程序 变量 ” 命 
令 ， 弹 出 图 12-18 所 示 的 “应 用 程序 变量 ”对 话 框 。 


阶段 变星 


名 称 : | 


图 12-17 “阶段 变量 ”对 话 框 图 12-18 “应 用 程序 变量 ”对 话 框 


(2) 在 “名 称 ” 文 本 框 中 输入 应 用 程序 变量 的 名 称 ， 单 击 “ 确 定 ”按钮 即 可 完成 操 
作 。 

(3) 在 “应 用 程序 变量 ”对 话 框 中 输入 的 变量 名 与 在 源 代 公 中 号 入 Application 〈" 变 
量 名 ") 的 功能 一 样 。 


12.8 ”使 用 外 部 程序 接口 


使 用 Dreamweaver 与 Fireworks 的 结合 特性 不 仅 可 以 方便 地 实现 两 者 间 的 文件 交换 ， 
而 且 还 可 以 共享 和 管理 HTML 文件 中 的 许多 内 容 ， 如 链接 、 图 像 等 。 这 将 大 大 提高 网 页 设 
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计 与 编辑 的 效率 ， 提 供 了 一 个 高 效 的 网 页 制作 流程 。 

使 用 Dreamweaver 与 Flash 的 集成 特性 ， 可 以 在 制作 网 页 的 时 候 和 直接 运 用 Flash 中 的 
文件 ， 在 网 页 中 插入 Flash 文件 使 网 页 更 加 生动 。 本 市 主要 介绍 在 使 用 Dreamweaver 制作 
网 页 时 运用 Fireworks 文件 。 


12. 8. 1 插入 Fireworks 图 像 和 HTML 文件 


在 Dreamweaver 中 可 以 点 击 “ 揪 入 ”/“ 常 用 ”面板 上 的 加 ?3 按钮， 直接 插入 Fireworks 
生成 的 GIF、JPEG/JPG 或 者 PNG 图 像 ， 还 可 以 插入 Fireworks 的 HTML 文件 。Fireworks 
的 HTML 文件 中 包括 了 相关 联 的 图 像 链接 、 切 片 信 息 和 JavaScript 脚本 语言 。 插 入 HTML 
文件 可 以 在 Dreamweaver 页 面 中 非常 方便 的 加 入 Fireworks 生成 的 图 像 和 网 页 特效 。 

(1) 在 Dreamweaver 文档 窗口 中 ， 将 光标 置 于 所 要 插入 HIML 文件 的 位 置 。 

(2) 执行 “插入 ”/“ 图 像 对 象 ”/“Fireworks HIML ”命令 ， 或 者 单 击 “插入 ”|“ 锅 
用 ”面板 上 的 本 Fireworks HTWL 按 钮 ， 弹 出 一 个 图 12-19 所 示 的 “插入 Fireworks HTML” 
对 话 杠 。 

(3) 在 对 话 框 中 单 击 “浏览 ”按钮 选择 所 要 插入 的 HTML 文件 ， 或 者 在 “Fireworks 
HTML 文件 ”文本 框 中 输入 HTML 文件 的 路 径 。 

(4) 如 果 选 中 “插入 后 删除 文件 ” 复 选 枉 ， 则 HTML 文件 插入 页 面 后 ， 源 文件 将 被 
删除 。 使 用 该 选项 前 请 确认 不 再 需要 使 用 源 HTML 文件 。 该 选项 不 影响 图 像 文件 ， 仅 仅 删 
除 单独 的 HTML 源 文件 。 


精 入 Fireworks HIRI. 


Fireworks HTML 人 Y 忻 : | 


选项 ，[] 插入 后 册 除 文件 


图 12-19 “搬入 Fireworks HITML ”对话 框 


(5) 单 击 “ 确 定 ” 按 钮 完成 。 
插入 HTML 文件 时 包含 了 HTML 源 文 件 关 联 的 图 像 ， 切 片 和 JavaScript 脚本 语言 。 


12. 8. 2 ”优化 插入 的 Fireworks 图 像 


在 Dreamweaver 中 可 以 快速 调用 Fireworks 的 图 像 输 出 设置 功能 ， 而 不 必 打 开 整 个 
Fireworks。Fireworks 的 图 像 输出 设置 功能 提供 了 诸如 图 像 格 式 设置 、 优 化 属性 设置 、 动 男 
属性 设置 、 文 件 大 小 设置 等 非常 简洁 和 实用 的 图 像 输出 处 理 功 能 ， 方 便 随 时 对 图 像 进行 一 
些 网 络 适 用 性 调整 。 

下 面 通过 示例 介绍 在 Dreamweaver 中 使 用 Fireworks 优化 插入 网 像 的 步骤 : 

(1) 选取 页 面 中 要 进行 优化 处 理 的 图 像 。 

(2) 执行 “命令 ”/“ 优 化 图 像 ”命令 ， 打 开 网 12-20 所 示 的 “图 像 优 化 ”对 话 框 。 

“图 像 优 化 ”对 话 框 提供 了 许多 控制 选项 ， 可 以 使 用 预 设 的 优化 方案 对 图 像 进行 优 
化 ， 也 可 以 自 定 义 优 化 选项 。 
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(1) 预 置 ， 该 下 拉 列 表 中 包含 6 种 Fireworks 预 设 的 优化 方案 ， 如 图 12-21 所 示 。 


[上 


职 消 


格式 ， 

品质 : 一 
用 于 照片 的 PNG24( 锐利 细节 ) 
用 于 照片 的 ]PEG (5 连续 色调 ) 
微 标 和 站 本 的 PNG8 


高 清 JPEG 以 实现 最 大 兼 容 性 
用 于 背景 图 像 的 GIF ( 图 案 ) 
站 件 大 小 ; 67 用 于 背景 图 像 的 PNG32( 渐变 ) 


图 12-20 ” “图像 优化 ”对 话 框 (1) 图 12-21 预 设 的 优化 方案 


选择 的 预 置 优化 方案 不 同 ， 显 示 的 优化 选项 也 不 同 。 例 如 ， 选 择 “ 用 于 背景 图 像 的 
GIF 图 案 )” 方 案 时 ， 对 应 的 优化 选项 如 图 12-22 所 示 。 


预 置 :| 用 于 背景 图 借 的 GIF CE Y 


耶 消 
格式 ， 
调 色 板 ; 


新 色 ， 
透明 度 ; 性 


色 版 :La| | 


交尾 汪 小 ;89k 


图 12-22 “图 像 优 化 ”对 话 框 (2) 

选择 其 他 优化 方案 时 ， 显 示 的 优化 选项 大 同 小 寞 ， 在 此 简要 介绍 图 12-23 中 的 优化 选 
项 功能 : 

(2) 调 色 板 : 设置 GIF 或 PNG 8 图 像 所 使 用 的 调 色 板 ， 有 2 种 选择 : 

> “最 合适 ” 使 用 日 适应 磊 色 。 从 图 像 中 选取 使 用 最 多 256 种 磊 色 组 成 调 色 板 ， 

包括 网 络 安全 色 和 非 网 络 安全 色 。 

> “ 灰 度 ” 使 用 256 色 灰 度 ， 导 出 黑白 图 像 。 

调 色 板 实际 上 是 一 个 颜色 索引 ， 用 于 将 多 像 中 像素 的 二 进 制 数值 同 荣 种 其 色 值 对 应 起 
来 。 在 显示 图 像 时 , 根据 这 种 像 系 值 和 两 色 值 的 对 应 关系 ， 孢 能 将 像素 颜色 正确 显示 出 来 。 
不 同 的 图 像 中 可 以 包含 不 同 的 调 色 板 。 所 以 对 同样 的 像素 值 ， 可 能 在 某 个 网 像 中 显示 为 这 
种 闫 色 ， 但 在 男 外 的 图 像 中 显示 为 其 他 闫 色 。 

(3) 闫 色 : 设置 图 像 中 的 凑 色 数目 。 凑 色 数目 是 图 像 中 调 色 板 里 可 以 包含 的 最 大 凑 
色 数 目 ， 不 是 图 像 中 真正 存在 的 颜色 数目 。 

(4) 失真 : 图 片 压缩 的 损失 值 。 损 失 值 的 有 效 范 围 是 0 一 100%。 通 单 GIF 图 像 的 损 
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TEVED (PAYXB 站 仇人 梨 六 
失 量 为 $ 一 1 时 ， 可 得 到 较 好 的 结果 而 不 影响 失真 。 

GIF 采用 无 损 压 迪 ， 所 以 采用 该 压 纵 算法 不 会 丢失 文档 中 的 数据 。 但 为 了 提供 更 多 的 
文件 大 小 的 选择 ，Fireworks 允许 设置 GIF 的 损失 量 ， 以 获取 更 高 的 压缩 率 。 较 高 的 损失 
量 可 以 获得 较 小 的 图 像 文件 , 但 是 图 像 的 失真 较 大 ; 较 低 的 损失 量 会 生成 较 大 的 图 像 文件 ， 
但 是 图 像 的 失真 较 小 。 

(5) 透明 度 : 将 画布 的 磊 色 设置 为 透明 。 

(6) 色 有 版 : 设置 图 像 的 边缘 凑 色 ， 应 用 在 导出 图 片 的 边缘 上 。 通 过 设置 该 闫 色 ， 可 
使 图 像 与 网 页 完全 融合 。 

(7) 品质 : 设置 JPEG 图 厂 的 压 乡 程 度 ， 单 位 是 %， 范 围 羡 0 一 100。 数 值 为 0 时 ， 
JPEG 图 片 质量 最 低 ， 但 文件 最 小 ， 数值 为 100 时 ，JPEG 图 片 质量 最 高 ， 但 文件 最 大 。 


12.9 ”综合 实例 


以 上 癌 读者 介绍 了 在 Dreamweaver 中 运用 Fireworks 文件 的 各 种 操作 ， 下 面 通 过 一 个 
实例 介绍 在 Dreamweaver 中 对 Fireworks 和 Flash 对 象 的 使 用 。 最 终 效 果 图 如 图 12-23 所 示 。 


KS 
I 


ANANAN AN 


图 12-23 页面 制作 的 效果 图 


12. 9.1 页 面 布局 


019 新 建 一 个 HTML 页面， 执行 “查看 ”/“ 可 视 化 助理 ”/“ 框 架 边框 ”菜单 命令 
显示 文档 窗口 的 框架 边框 。 

02 单 击 “ 插 入 ”|“HTML”| “框架 ”| 上方 及 左 侧 通 人 套 ” 命 令 ， 在 页 面 中 创建 一 
个 框 染 集 。 选 中 上 方 的 框架 ， 拖 动 框架 左 侧 的 边框 ， 髓 僚 一 个 框架 。 

03 朋 打开 框架 属性 面板 ， 为 各 个 框架 命名 。 由 上 到 下 ， 由 左 到 右 依 次 为 “Framel” 
“Frame2”、“Frame3” 和 “Frame4”， 此 时 的 “框架 ”面板 如 图 12-24 所 示 。 

04 执行 “修改 ”/“ 页 面 属性 ”命令 ， 为 各 个 框架 设置 背景 闫 色 ，Framel、Frame2、 
Frame3 的 背景 颜色 分 别 为 #0CF、#FFC、#CFF， 此 时 的 页 面 效果 如 图 12-25 所 示 。 
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图 12-24 “框架 ”浮动 面板 图 12-25 ”设置 完 背 景色 的 页 面 


12.9.2 插入 并 优化 Fireworks 文件 


01 在 文档 窗口 中 ， 将 光标 置 于 Frame2 框架 中 。 执 行 “ 插 入 ”/“ 图 像 ” 命 令 ， 或 
者 直接 点 击 “ 插 入 ”/“ 常 用 ”面板 上 的 图 按钮 。 

02 在 弹出 的 “选择 图 像 源 ”对 话 框 中 选取 所 要 插入 的 Fireworks 图 像 文 件 ， 或 者 下 
接 和 输入 图 像 文件 所 在 的 路 径 。 此 时 ， 页 面 在 Dreamweaver 中 的 设计 视图 如 图 12-26 所 示 。 


uk es 


要闻 籼 辣 漂 当 加 兴 总 


图 12-26 ”页面 插入 Fireworks 图 像 后 的 效果 


12.9.3 插入 Flash 对 象 


01 将 光标 置 于 Frame3 框架 中 ,执行 “插入 ”| “表格 ”菜单 命令 ,在 弹出 的 “表格 ” 
对 话 框 中 设置 行 数 为 5， 列 数 为 1， 宽度 为 98%， 边 框 粗细 为 0。 选 中 插入 的 表格 ,在 属性 
面板 上 的 “对 齐 ” 下 拉 列 表 中 选择 “居中 对 齐 ”。 

02 有 选中 所 有 单元 格 ， 在 属性 面板 上 设置 单元 格 内 容 水 平和 垂直 对 章 方式 均 为 “ 居 
中 ”单元 格 高 度 为 50。 

03】 将 光标 定位 在 第 一 行 单元 格 中 ， 执 行 “插入 ”/“ 媒 体 ”/“SWF” 菜单 命令 ， 择 
入 一 个 预先 制作 好 的 Flash 对 象 作为 导航 图 标 。 
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Gemmyogvor CCOGB 守 党 限 程 准 实 他 烁 各 
04 朋 按照 上 一 步 的 方法 插入 其 他 四 个 导航 按钮 。 调 整 按 钮 的 位 置 ， 得 到 图 12-27 所 
示 的 效 末 。 


图 12-27 插入 Flash 对 象 后 的 效果 图 


05] 将 光标 放置 于 文档 窗口 的 Fame4 框架 中 ， 执 行 “ 插 入 ”/“ 媒 体 ”/“SWF” 
单 命令 ， 在 弹出 的 对 话 框 中 选取 所 要 插入 的 Flash 电影 

06 在 属性 面板 中 设置 Flash 电影 的 大 小 。 此 时 的 “设计 ”视图 如 图 12-28 所 示 。 音 
击 属性 面板 中 的 医 -本 可 按钮 , 可 以 看 到 Flash 电影 的 效果 , 此 时 的 “设计 ”视图 如 图 12-29 
所 示 。 
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图 12-28 插入 Flash 电影 后 设计 视图 图 12-29 显示 Flash 电影 效果 


07 将 光标 定位 在 Framel 框 案 中 ， 输 入 文本 “welcome”， 并 创建 CSS 规则 对 文本 
进行 格式 化 。 设 首 字 体 为 “华文 彩云 "， 大 小 为 48， 闫 色 为 本 30 得 到 图 12-23 所 示 的 最 余 
效果 。 


12.10 动手 练 一 练 


1. 如 果 你 的 Dreamweaver 安装 在 Windows 系统 上 ， 并 且 在 运行 Web 服务 器 ， 请 建立 
与 一 个 命名 为 udbookdatal 数据 库 的 连接 。 

2. 在 Dreamweaver 中 调用 Fireworks 并 使 用 Flash 制作 一 个 网 页 。 最 终 页 面 的 效果 图 
如 图 12-30 所 示 。 
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传说 中 ， 
当 你 触 碰 到 天 使 的 羽毛 ， 
通 往 空 中 的 阶梯 将 为 你 而 开 …… 
流星 童年 Cn 
电脑 算命 脱离 喧 器 的 俗世 ， 已 寻找 了 千 万 次 的 天 堂 ， 
毕业 留影 这 里 ， 各 一 化 协 叶 的 问 忆 
毕业 贸 影 ， 每 一 丝 珍 贵 的 回忆 ， 
sf bs 都 在 天 使 的 精心 呵护 下 绽放 出 妖艳 的 花 采 。 
天 使 之 吻 在 幻梦 般 的 花 以 美景 中 穿梭 ， 
在 醉人 的 音乐 声 中 锁 笠 。 
自动 情书 大 使 之 师 。= a 
免费 下 载 期 盼 日 后 爱 意 纯 真 ， 回 首 往 事 柔 情 肚 油 ! 
给 我 留言 [给 和 证 | < 
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区 化 四 1399-zZUUS Ss 
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图 12-30 操作 效果 图 


12.11 思考 题 


1. 在 Dreamweaver 中 如 何 调 用 Fireworks? 
2. 在 Dreamweaver 中 如 何 定 义 ODBC 数据 源 ? 
3. 在 Dreamweaver 中 如 何 插 入 一 个 Flash 电影 ? 
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第 13 章 宠物 网 站 设计 和 会 实例 

: ”本 实例 将 详细 介绍 在 Dreamweaver CS6 中 制作 宠物 网 站 的 具体 步骤 。 : 
; 本 例 用 到 的 知识 点 主要 有 AP 元 素 和 动作 , 此 外 还 有 表格 、 表 单 对 象 、 链 接 、: 
; 图 像 、 电 子 邮 箱 链接 和 JavaScript 等 知识 。 整 张 页 面 使 用 AP 元 素 进 行 布局 ，， 
; 所 有 的 网 页 元 素 均 放 到 AP 元 素 里 面 。 利 用 AP 元 素 的 显示 和 隐藏 功能 达到 
' 在 一 个 较 小 的 窗口 里 显示 较 多 内 容 的 目的 。 


Adobe Dreamweaver (5%6 


@ 


控制 AP 元 素 的 显示 /隐藏 
@ 使 用 JavaScript 


| 


13.1 实例 介绍 


宠物 网 站 实例 是 介绍 宠物 交易 、 宠 物产 护 、 宠 物 选 类 及 宠物 医院 的 网 站 。 本 例 共有 商 
页 ， 第 一 页 最 终 效 来 如 图 13-1 所 示 ， 状 态 栏 显示 “欢迎 光临 iDog 爱 犬 联盟 宠物 网 !”。 
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图 13-1 首页 


光标 保留 在 “宠物 市 场 ” 按 钮 上 时 ， 状 态 位 显示 “欢迎 光临 iDog 宠物 市 场 !1”， 光 标 
停留 在 “宠物 Show” 按 钮 上 时 ， 状 态 柱 避 示 “欢迎 参加 全 IN 狗 狗 show 先天 大 赛 !”， 单 
击 该 按钮 ， 显 示 的 宠物 选 类 相关 内 容 将 履 六 挥 “宠物 市 场 ” 的 页 面 ， 如 图 13-2 所 示 。 
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图 13-2 ”实例 页 面 
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CBE TTB XB 六 浆 约 和 本 准 实 创 发 在 
13.2 ”准备 工作 
在 开始 制作 本 例 之 前 ， 先 介绍 一 下 制作 宠物 网 站 所 需 的 准备 工作 。 
01 在 便 盘 上 新 建 pet 目录 ， 在 pet 目录 下 创建 images 子 目 录 。 


02 在 图 片 编辑 软件 里 制作 栏目 标题 图 片 及 logo， 如 图 13-3 所 示 。 把 这 些 图 片 保存 
到 pet\images 目录 下 。 把 其 他 需要 用 到 的 图 片 也 都 复制 到 本 目录 。 


图 13-3 栏目 标题 、 导 航 按 钮 以 及 logo 图 片 


03 启动 Dreamweaver CS6， 执 行 “ 站 点 ”|“ 新 建站 点 ”命令 新 建 一 个 名 为 pet 的 
本 地 站 点 ， 使 其 指 癌 刚刚 创建 的 pet 目录 。 
至 此 准备 工作 完毕 ， 可 以 开始 制作 网 站 页 面 了 。 


13.3 ”制作 首页 


首页 的 制作 主要 是 运用 AP 元 素 技术 排版 页 面 布局 . 
01 启动 Dreamweaver CS6， 新 建 一 个 空白 的 HTML 文件 。 然 后 执行 “修改 ”/“ 页 
面 属性 ”命令 ， 在 弹出 的 “页 面 属性 ”对 话 框 左 侧 的 分 类 列表 中 选择 “外 观 (CSS)”， 并 
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在 右 侧 的 面板 中 设置 字体 大 小 为 14， 文 本 颜色 为 #060。 切 换 到 “链接 ”页 面 ， 设 置 “ 链 
接 颜色 ”为 扫 33,“ 已 访问 链接 ”颜色 为 #600,“ 活 动 链 接 ” 颜 色 为 #E30,“ 下 划 线 样式 ” 
为 “始终 无 下 划 线 ”， 然 后 单 击 “ 人 确定 ”按钮 天 闭 对 话 框 。 

02 执行 “窗口 ”/“ 插 入 ” 表 单 命令 ,打开 “插入 ”浮动 面板 ， 然 后 切换 到 “布局 ” 
面板 ， 单 击 该 面板 中 的 “绘制 AP Div” 图 标 按钮 晶 ， 按 住 Ctrl 键 在 页 面 中 绘制 5 个 AP 
元 素 ， 并 在 属性 面板 上 为 每 个 AP 元 素 命 名 ， 各 个 AP 元 素 的 效果 及 名 字 如 图 13-4 所 示 。 


旷 led-2 (XHTNL)* x 
log time 人 
navigator content News 

a 
人 > 
hody> [RID QQ 100% v| 回转 767 x 552v 2 kK /1 秒 Unicode (UTF-8) 


图 13-4 首页 布局 


03 把 光标 定位 在 名 为 logo 的 AP 元 素 内 ， 单 击 “ 插 入 ”浮动 面板 中 “常用 ”面板 
上 的 “表格 ”图 标 按钮 虽 ， 设 置 表格 行 数 为 1， 列 数 为 2， 宽度 为 100%， 边 框 粗细 为 0。 
选中 单元 格 ， 设 置 单 元 格 内 容 水 平 “ 左 对 齐 ”， 垂 直 “ 届 中 ?” 

04 将 光标 定位 在 第 一 行 一 列 单元 格 中 ， 单 击 “ 搬 入 ”浮动 面板 中 “和 党 用 ”面板 上 
的 插入 图 片 图 标 轩 。 在 弹出 的 插入 图 片 对 话 框 中 选择 需要 的 图 片 ， 然 后 单 击 “ 确 定 ” 按 钮 
完成 图 片 插 入 。 用 同样 的 方法 在 第 二 列 单 元 格 中 插入 图 厂 。 调整 图 片 大 小 和 AP 元 素 尺 寸 ， 
此 时 文件 效果 如 图 13-5 所 示 。 

05. 在 AP 元 素 navigator 内 插入 一 张 7 行 1 列 的 表格 ， 在 表格 的 属性 面板 上 设置 宽 
为 170 像素 ， 边 框 粗细 为 0， 对 齐 方式 为 “居中 对 章 ” 表格 名 称 为 t_1。 

06 选中 前 5 个 单元 格 ， 在 属性 面板 上 设置 单元 格 内 容 水 平 对 齐 和 垂直 对 齐 方式 均 
为 “居中 ” 单元 格 高 度 为 50。 

0 全 将 光标 定位 在 第 一 个 单元 格 中 ， 执 行 “ 插 入 ”| 图像” 命令， 打开 “选择 文件 ” 
对 话 框 。 从 对 话 框 中 选择 预先 制作 好 的 导航 按钮 。 然 后 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 用 
同样 的 方法 插入 其 他 4 个 导航 按钮 ， 此 时 的 页 面 效果 如 图 13-6 所 示 。 

接 下 来 的 步骤 为 导航 按钮 添加 “区 换 图 像 ”行为 。 当 光标 移 到 按钮 上 时 ， 按 钮 上 的 文 
本 颜色 变 为 杰 色 。 
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Yr CEB 交角 系 蕉 位 创 私 记 


到 
看 
0. html 【HTXL] 炒 | 
已 


< I > 
<bodv> [Kdiv#logo [RR| 池 愉 li00% ~v| 回国 喔 ] 354 x 552v |89 K /2 秒 | Unicode (UTF-8) 


图 13-5 插入 logo 


\e 
< > 
dy? AR ~ 国 册 WN 9854552 i107 Kk/3 Unicede (MIT-6) 


图 13-6 ”插入 导航 按钮 后 的 效果 


08 选中 第 一 行 单元 格 中 的 导航 按钮 ， 在 属性 面板 上 指定 了 DD 为 “市 场 ” 然后 打开 
“行为 ”面板 ， 单 击 “ 添 加 行为 ”按钮 ， 在 弹出 的 行为 列表 中 选择 “交换 岁 像 ” 行 为 ， 弹 
出 “交换 图 像 ” 对 话 框 。 单 击 “ 设 定 原始 档 为 ”文本 框 右 侧 的 “浏览 ”按钮 ， 选 择 要 交换 
的 图 片 ， 如 图 13-7 所 示 。 

早 击 “实时 视图 ”按钮 ， 即 可 了 预 钨 交换 图 像 行为 效果 ， 如 图 13-8 所 示 。 

同 理 ， 为 其 他 4 个 按钮 添加 交换 图 像 行 为 。 

09 将 光标 定位 在 表格 的 第 6 行 , 单 击 “插入 ”/“ 常 用 ”面板 上 的 插入 图 片 图 标 图 ，。 
在 弹出 的 插入 图 片 对 话 框 中 选择 需要 的 图 片 ， 然后 单 击 “人 确定 ”按钮 完成 图 片 插入 。 这 时 
文件 效果 如 图 13-9 所 示 。 
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: unnamed <img 


Unnamed <img 
医 | 加 “由 加 "navigator” * 
~ 


| 尾 EF navigator” 
图 像 navigator” 
"navieator” 

“naviegator” 


设 定 原始 档 尘 : jimagesy 宠物 市 场 2. gif 


预先 载 入 图 像 
鼠标 消 开 时 恢复 图 像 


图 13-7 “交换 图 像 ” 对 话 框 


| C:\Inetpub\wmwroot\pet\indez0. html (XHTHL)* 


¢P 


content 


@ ] 
<body> <divinavizator> <table#t 1>|Ktbody 霹 100% v| 回转 [ 854 x 552 108 K73 种 Unicode (UTF-8) 


图 13-8 “交换 图 像 ” 行 为 的 效 朱 


。 
盎 c:\inetpub\wwroot\pet\indezo. html [XHTHL)* lt 


% 
他 ! | 
‘<body> [五 区 lox ~v 回回 [| 699 x510 |122 kK /3 秒 | Unicode (UTF-8) 


图 13-9 插入 栏目 图 所 
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roGmYGT (CTS 已 中 六 股 每 淮 袜 创 未 负 

1 咖 将 光标 定位 在 表格 的 第 7 行 ， 单 击 右键 ， 从 上 下 文 菜单 中 选择 “表格 ”|“ 拆 分 
单元 格 ”命令 ， 将 单元 格 折 分 成 5 行 。 选 中 拆 分 后 的 单元 格 ， 设 置 单 元 格 内 容 水 平 “ 左 对 
齐 ” 垂直 “居中 ” 单元 格 高 度 为 25。 

1 个 在 各 单元 格 中 输入 文本 。 选 中 输入 的 文本 ， 在 属性 面板 上 单 击 L 允 mc 按钮 ， 然 
后 单 击 “项 目 编号 ”按钮 旺 |， 为 文本 添加 编号 ， 此 时 文件 效果 如 图 13-10 所 示 。 


把 
需 c:\inetpub\wwroot\pet\indezo. html (XHTHL)* | 


洗 谋 好 多 


I< 


> 


< 山 | 
<body> [| 西区 lo >v 回 男 恩 6gxs7 |123 kK/3 秒 | Unicode (UTF-8) 


图 13-10” 拆 分 单元 格 及 输入 文本 
12 将 光标 置 于 AP 元 素 time 中 ,切换 到 “代码 ”视图 ， 在 中 间 插 入 如 下 JavaScript 
代码 : 
<script Language ="JavaScript"> 
today=new Date(); 
function initArray(){ 
this.length=InitArray.arguments.length 
for(var 1!=0;i<this.length;l++) 
this[i+1]=initArray.arguments[!] } 
var d=new InitArray( 
"星期 日 "， 
"星期 一 "， 
"星期 二 "， 
"星期 三 "， 
"性 期 四 ", 
"星期 五 "， 
"性 期 六 "); 


document.write(today.getYear()," 年 ",today.getMonth()+1," 月 ",today.getDate()," 日 
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dltoday.getDay(U+1] 7) 
</Script> 
然后 按 F12 功能 键 了 预先 文档 ， 如 图 13-11 所 示 。 


使 用 JavaScript 脚本 ， 需 熟悉 JavaScript， 也 可 以 到 网 上 下 载 现 成 的 


Bs 
JavaScript 程序 。 


受 大 联盟 网 幼 几 ”合作 


图 13-11 页 面 显 示 时 间 


13 在 AP 元 素 content 中 插入 3 行 2 列 的 表格 ， 在 属性 面板 上 将 其 命名 为 t_2， 并 
将 表格 边框 设置 为 0， 表格 宽度 为 100%。 将 光标 定位 在 第 一 行 一 列 的 单元 格 中 ,执行 “ 插 
入 ”/“ 表 格 ” 命 令 ， 舱 入 一 个 6 行 2 列 的 表格 ， 在 属性 面板 上 将 其 命名 为 t 3。 

14 选中 先入 的 表格 t_3 的 第 一 行 单元 格 ， 在 属性 面板 中 设置 其 背景 颜色 为 
#CCCCCC。 同 理 ， 设 置 第 三 行 和 第 五 行 单 元 格 的 背景 颜色 。 

15 选中 骸 套 表格 t_3 中 的 所 有 单元 格 ， 设 置 高 度 为 30， 单 元 格 内 容 水 平 对 齐 方式 
为 “ 左 对 齐 ” 王 直 对 齐 方式 为 “居中 ”并 输入 文本 。 然 后 在 表格 t_2 第 一 行 二 列 的 单元 
格 中 插入 宠物 的 图 片 ， 设 置 此 单元 格 内 容 水 平 “ 居 中 对 齐 ” 年 直 “ 顶 端 ” 对 齐 。 此 时 的 
页 面 效 果 如 图 13-12 所 示 。 

16 | 将 光标 定位 在 表格 t_2 第 二 行 第 一 列 单元 格 中 ， 单 击 属性 面板 上 的 “ 拆 分 单元 
格 ” 按 钮 二， 将 此 单元 格 拆 分 为 两 列 。 然 后 在 拆 分 后 的 第 一 列 单元 格 中 输入 文本 ， 设 置 
第 二 列 单元 格 的 背景 颜色 为 #CCCCCC， 并 输入 文本 。 

17 将 光标 定位 在 表格 t_2 第 二 行 第 二 列 单元 格 中 ， 设 置 单元 格 内 容 水 平和 垂直 对 
齐 方式 均 为 “居中 ”并 输入 文本 。 

18 | 选 定 表 格 t_2 第 三 行 ， 单 击 右键 ， 从 上 下 菜单 中 选择 “表格 ”|“ 合 并 单元 格 ” 
命令 ， 将 第 三 行 合并 为 一 行 。 再 次 单 击 右键 ， 选 择 “ 表 格 ”|“ 拆 分 单元 格 ” 命 令 ， 将 第 
三 行 拆 分 成 两 行 。 


五 
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19 光环 失 耸 尼 的 两 生 豚 志和 在 人 
均 为 “居中 ”然后 在 第 一 行 中 插入 一 条 水 平 线 ， 在 第 二 行 中 输入 版 权 信 息 。 此 时 文档 效 
果 如 图 13-13 所 示 。 


"为 再 全 有 好 杀人 让 


* 与 和 革 的 do 


* 坝 美 天 的 美 豆 护理 


， 可 学 物 狗 符 鞭 枢 寺 


“ 宝 由 的 世相 时 


图 13-12 髋 入 表格 并 插入 内 容 


爱 大 耽 盟 宠物 网 


ps 联系 电话 : 12345678 


好 多 记 他 . 四 站 交易 地 点 ， 北京 
所 发 布 日 期 : 2012.07.01 


图 13-13 合并 单元 格 并 输入 内 容 
20 选中 版 权 信息 中 的 “ 爱 犬 联盟 宠物 网 站 ”， 在 属性 面板 上 的 “链接 ”文本 框 中 输 


入 #。 即 单 击 此 文本 ， 返 回 页 面 项 端 。 

21 参照 AP 元 素 navigator 的 制作 方法 完成 AP 元 素 news。 至 此 ， 页 面 内 容 布 局 完 
成 ， 效 果 如 图 13-14 所 示 。 

22 执行 “窗口 ”|“AP 元 素 ” 命 令 ， 打 开 AP 元 素 管 理 面板 ， 取 消 选 中 “防止 重 琶 ” 
复 选 枉 ， 然 后 单 击 AP 元 对 content 左 侧 的 眼睛 图 标 ， 使 之 闭 眼 ， 隐 藏 该 AP 元 素 。 

23 执行 “插入 ”|“ 布 局 对 象 ”|“AP Div” 人 命令， 在 AP 元 率 content 原来 的 位 置 绘 
制 一 个 与 content 大 小 一 样 的 AP 元 素 ， 给 AP 元 素 取 名 为 show。 
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24 执行 “编辑 ”|“ 首选 参数 ”菜单 命令 , 在 弹出 的 “首选 参数 ”对 话 框 中 选择 “AP 
元 素 ” 分 类 ， 义 选 “ 髓 套 ， 在 AP div 中 创建 以 后 藤 套 ”选项 ， 然 后 单 击 “ 确 定 ” 按 钮 关 
闭 对 话 框 。 

25 将 光标 定位 在 AP 元 素 show 中 ， 单 击 “ 布 局 ”插入 面板 上 的 “绘制 AP div” 按 
钮 ， 然 后 拖 动 光标 绘制 一 个 AP 元 素 ， 后 绘制 的 AP 元 素 将 般 套 在 AP 元 素 show 内 ， 在 属 
性 面板 上 将 绘制 的 子 AP 元 素 命 名 为 picl。 

26 选择 “插入 ”|“ 图 像 ” 命 令 ， 在 AP 元 素 picl 中 插入 图 片 ， 然 后 调整 图 片 的 大 
小 。 用 同样 的 方法 , 绘制 为 一 个 子 AP 元 素 并 插入 图 片 ， 此 时 的 页 面 效果 如 网 13-15 所 示 。 


2012 年 3 月 3 日 a 特别 推荐 


*。 “至 IN 狗 Show 选 美 大 赛 


8500RMB 


* 比赛 狗 的 造型 
聪明 、 友 善 的 性 格 令 
萨摩 大 多 大 受 欢迎 
. 狗 狗 洗澡 好 多 泡 泡 然 体 型 较 大 ， 0 - 居家 完 物 的 美容 
ge RE Ee 联系 电话 ，12345678 
~ ’ “el . * 春秋 季 狗 狗 的 护理 
萨摩 三，S 交易 地 点 ， 北 京 
E A 发 布 日 期 ，2012.07.01 
* 博美 大 的 美容 护理 ， 唉 多 往 仿 ! * 饲养 龙 猫 的 条 件 和 设施 
ee 求 的 难 
得 一 见 青 品 。 
* 可 爱 狗 狗 钟爱 秋生 . 对 狗 狗 有 毒 的 植物 


"宝贝 的 艺术 照 


Copyright @@ 2012-2014 爱 犬 联盟 完 物 网 站 All rights reserved. 


图 13-14 页面 效 末 


Rn 
本 
0 


大 的 美容 扩 旦 
:， 可 党 首 狗 钟 演 秋 和 
.宝贝 的 艺术 昭 


图 13-15 ” 骨 套 AP 元 素 后 的 效果 
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Ha Yor CAB 站 六 役 坏 准 实 创 直 下 

wwe ww _ 个 Ap 元 素 , 单 击 属性 面板 上 的 “居中 对 齐 * 按钮 国 ] 
然后 选择 “表单 ”插入 面板 上 的 “表单 ”按钮 插入 一 张 表单 。 

28 将 光标 定位 在 表单 中 ， 插 入 一 个 两 行 一 列 的 表格 ， 表 格 宽度 为 300 像素 ， 边 框 
粗细 为 0。 选 中 表格 ， 在 属性 面板 上 的 “对 齐 ” 下 拉 列 表 中 选择 “居中 对 齐 ”。 

29, 将 光标 定位 在 第 一 行 单 元 格 中 ， 设 置 单 元 格 内 容 水 平 对 齐 方式 和 垂直 对 章 方式 
均 为 “居中 ” 然后 在 单元 格 中 输入 文本 “参赛 报名 表 ”。 在 属性 面板 上 的 “目标 规则 ”下 
拉 列 表 中 选择 “新 CSS 规则 ” 然后 单 击 “ 编 辑 规则 ”按钮 ， 在 弹出 的 “新 建 CSS 规则 ” 
对 话 框 中 设置 选择 右 类 型 为 “类 ”选择 器 名 称 为 .fontstyle， 单 击 “ 确 定 ” 按 钮 打开 规则 
定义 对 话 框 。 设 置 字 体 为 “华文 行 覆 ” 学 体 大 小 为 24， 且 加 狂 。 

30 9 将 光标 定位 在 第 二 行 的 单元 格 中 ， 单 击 右键 ,执行 “表格 ”|“ 拆 分 单元 格 ” 合 
令 ， 将 单元 格 折 分 成 8 行 。 选 中 拆 分 后 的 前 7 行 单元 格 ， 在 属性 面板 上 设置 水 平 对齐 方 式 
为 “ 左 对 齐 ”， 王 直 对 齐 方式 为 “居中 ”局 上 度 为 30。 然 后 在 单元 格 中 插入 文本 、 文 本 域 
和 文本 区 域 ， 如 图 13-16 所 示 。 


参赛 报名 表 


主人 姓名 
联系 电话 


0 | 


完 物品 种 
宠物 昵称 
完 物性 别 
出 生日 期 


图 13-16 ”插入 表单 对 象 


31 将 第 8 行 拆 成 两 列 ， 在 第 一 列 单元 格 中 执行 “插入 ”|“ 表 单 ”|“ 按 钮 ”命令 ， 
选中 插入 的 按钮 后 ， 在 属性 面板 中 设置 按钮 名 称 为 submit， 值 为 “提交 ”动作 为 “提交 
表单 ” 

32 将 光标 定位 在 第 二 列 单元 格 中 ， 执 行 “ 择 入 ”|“ 表 单 ”|“ 按 钮 ”命令 ， 选 中 插 
入 的 按钮 后 ， 在 属性 面板 中 设置 按钮 名 称 为 reset， 值 为 “ 重 置 >， 动作 为 “ 重 议 表 单 ” 

33 在 最 后 一 行 表格 中 输入 “ 注 : 请 将 宠物 照片 发 送 到 ”， 然 后 选择 “插入 ”| “电子 
邮件 链接 ”命令 ， 打 开 “ 电 子 邮 件 链 接 ” 对 话 框 ， 在 “文本 ”后 输入 “我 们 的 邮箱 ” 然 
后 键入 邮箱 地 址 ， 单 击 “ 确 定 ” 

人 至此，AP 元 素 Show 中 的 内 容 布 局 完成 ， 此 时 的 效果 图 如 图 13-17 所 示 。 将 光标 移动 
到 “我 们 的 邮箱 ”上 时 显示 为 手 形 ， 表 明 其 为 链接 文字 。 
接 下 来 的 步 缀 用 于 显示 /隐藏 AP 元 素 ， 并 设置 状态 栏 文 本 。 

3 和 选中 “宠物 Show” 按钮， 执行“ 窗口 ”| “行为 ”命令 打开 “行为 ”面板 。 单 击 
“行为 ”面板 上 的 志 - 按 钮 ， 在 弹出 来 单 中 执行 “显示 -隐藏 元 素 ” 命 令 。 在 弹出 对 话 框 中 
选中 AP 元 系 “content”， 单 击 “ 隐 医 ” 然后 单 击 “ 确 定 ” 按 钮 。 为 刚 绑 定 的 行为 选择 
OnClick 事件 。 
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* 可爱 的 dudu 完 物 品种 | ， 奉 秋季 狗 狗 的 护理 
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.博美 大 的 美容 护理 宠物 昵称 . 饲养 龙 猫 的 条 件 和 设施 
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* 宝贝 的 艺术 昭 


注 ， 请 将 宠物 照片 支 送 到 我 们 的 邮箱 ! 


图 13-17 “ 爱 宠 Show” 页 面 效果 


35 骨 选中 “宠物 Show” 按 钮 ， 单 击 “ 行 为 ”面板 上 的 二 按钮， 在 弹出 荣 单 中 执行 
“显示 -隐藏 元 素 ” 合 令 。 在 弹出 对 话 框 中 选中 AP 元 素 “Show”， 单 击 “ 显 示 然后 单 
击 “ 人 确定” 按钮 。 为 刚 绑 定 的 行为 选择 OnClick 事件 。 

36 选中 “宠物 市 场 ” 按 钮 ， 执 行 “ 窗 口 ”|“ 行 为 ”命令 打开 行为 面板 。 单 击 行为 
面板 上 的 [ 太 按 包 ， 在 弹出 菜单 中 执行 “显示 -隐藏 元 素 ” 命 令 。 在 弹出 对 话 框 中 选中 AP 
元 素 “content”， 单 击 “ 显 示 ” 然后 单 击 “确定 ”按钮 ， 为 刚 绑 定 的 行为 选择 OnClick 事 
件 。 


37 选 中 “宠物 市 场 ” 按 钮 ， 单 击 行为 面板 上 的 二 按钮， 在 弹出 菜单 中 执行 “显示 - 
隐藏 元 素 ” 命 令 。 在 弹出 对 话 框 中 选中 AP 元 素 “Show” 单 击 “隐藏 ”% 然后 单 击 “ 确 定 ” 
按钮 ， 为 刚 绑 定 的 行为 选择 OnClick 事件 。 

3 外 选中 “宠物 市 场 ”按钮 ， 单 击 行为 面板 上 的 过 按钮， 在 弹出 沫 单 中 执行 “设置 
文本 ”|“ 设 置 状 态 栏 文本 ”命令 。 在 弹出 对 话 框 中 键入 消息 内 容 “ 欢 迎 光 临 iDog 宠物 市 
场 !”。 然后 单 击 “ 确 定 ” 按 钮 ， 为 刚 绑 定 的 行为 选择 OnMouseOver 事件 。 

39 选中 “宠物 Show” 按 钮 ， 单 击 行为 面板 上 的 过: 按钮 ， 在 弹出 染 单 中 执行 “设置 
文本 ”|“ 设 置 状态 栏 文本 ”命令 ,在 弹出 对 话 框 中 键入 消 恩 内容“ 欢迎 参加 到 IN 狗 狗 Show 
选美 大 赛 !”， 然 后 单 击 “确定 ”按钮 ， 为 刚 绑 定 的 行为 选择 OnMouseOver 事件 。 

40 引 重复 以 上 步 又 处 理 其 他 按钮 。 


a 
”41 选中 AP 元 素 logo 中 的 图 像 , 单 击 行为 面板 上 的 二 按钮 , 在 弹出 菜单 中 执行 < 设 
置 文本 ” |“ 设置 状态 栏 文本 ”命令 ， 在 弹出 对 话 框 中 输入 “欢迎 光临 iDog 爱 犬 联盟 宠物 
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网 1”。 a “确定 ”按钮 ， 为 刚 绑 定 的 行为 选择 OnLoad 事件 。 

42 在 AP 元 素面 板 中 ， 将 AP 元 素 content 设 为 显示 ， 隐 藏 AP 元 素 Show。 

于 由; a SO a pan 保存 文件 之 后 按 F12 键 可 以 
在 浏览 器 中 预览 页 面 效 果 。 读 者 可 以 参照 本 例 的 制作 步骤 完成 其 他 导航 按钮 对 应 的 链接 页 
ie 


13.4 制作 其 他 页 


其 他 页 与 第 一 页 制作 方法 相似 。 为 了 市 省 时 间 ， 可 以 先 打开 第 一 页 ， 然后 为 存 为 一 个 
副本 ， 在 上 和 而 修改 残 行 了 。 具 体 当 作 一 个 练习 请 读者 目 行 完 成 。 


13.5 ”思考 题 


本 综合 实例 中 ， 奉 同时 显示 车 加 在 一 起 的 两 个 AP 元 素 ， 则 两 个 AP 元 素 中 的 文学 会 
营 加 在 一 起 显示 造成 混乱 ， 在 此 情况 下 是 否 有 办 法 可 以 只 显示 位 于 上 和 面 的 AP 元 素 中 的 文 
本 


248 


企业 网 站 设计 竹 会 实例 


RE 


:本 综合 实例 将 详细 介绍 在 Dreamweaver CS6 中 制作 一 个 信息 发 布 型 企 ; 
业 网 站 的 具体 步骤 。 信 息 发 布 型 企业 网 站 以 企业 宣传 为 主题 ,本章 主要 介绍 ， 
; 这 类 网 站 的 规划 、 产 品 的 展示 以 及 网 站 测试 等 方面 的 知识 。 主要 知识 点 包括 
使 用 表格 进行 页 面 布局 ， 创 建 CSS 规则 设置 单元 格 的 背景 图 像 等 。 


AdODe DreaNnWeaver (6 


名 ”网 站 策划 的 一 般 方法 
名 使 用 表格 布局 页 面 
时 ”创建 CSS 规则 设置 单元 格 的 背景 图 像 


| 
| 
: 
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var (TS 和 已 中文 般 系 惟 
14.1 ”实例 介绍 


在 互联 网 络 高 速 发展 的 今天 ， 网 站 正成 为 各 类 机 构 进行 形象 展示 、 信 息 有 发布、 业务 拓 
展 、 客 尸 服 务 、 内 部 沟通 的 重要 阵地 。 根 据 企业 网 站 的 功能 分 类 ， 可 以 将 企业 网 站 分 为 两 
种 基本 形式 : 信息 发 布 型 网 站 和 电子 商务 型 网 站 。 

言 县 发 布 型 企业 网 站 ， 顾 名 思 义 ， 这 种 网 站 相当 于 在 线 厂 的 产品 宣传 册 ， 功 能 简单 ， 
内 容 单 一 ， 其 特点 是 造价 很 低 ， 维 护 也 简单 ， 往 往 在 企业 网 络 营 销 的 初期 采用 。 目 前 信息 
发 布 型 企业 网 站 仍然 是 大 多 数 中 小 型 企业 网 站 的 主流 形式 。 

随 看 企业 经 营 对 网 络 营 销 功 能 需求 的 增加 ， 这 种 简 里 的 信息 发 布 型 企业 网 站 束 无 法 满 
趾 经 营 需 要 了 ， 电 子 商务 型 网 站 应 运 而 生 。 电 子 商 务 型 网 站 主要 面 问 供应 商 、 客 户 或 者 企 
业 产 品 〈 服 务 〉 的 消费 群体 ， 以 提供 人 菏 种 下 属于 企业 业务 泡 围 的 服务 或 交易 、 或 者 为 业务 
服务 的 服务 或 者 交易 为 主 。 由 于 行业 特色 和 企业 投入 的 深度 广度 的 不 同 ， 其 电子 商务 化 程 
度 可 能 处 于 从 比较 初级 的 服务 文 持 、 产 品 列表 到 比较 高 级 的 网 上 文 付 的 其 中 东 一 阶段 。 例 
如 网 上 银行 、 网 上 酒店 等 。 

本 综合 实例 是 制作 一 个 信息 发 布 型 企业 网 站 ， 主 要 用 于 产品 展示 ， 如 图 14-1 所 示 。 


Qulity 


首 页 公司 简介 展示 大 厅 手机 鉴赏 
HOME PAGE PBDUT US DEMONSTRATION 


PRPPRECIRTE 


上 关于 我 们 


版 权 所 有 ; 品 尚 电子 数码 


图 14-1 网 站 首页 
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单 击 导航 栏 上 的 “手机 鉴赏 ” 即 可 打开 对 应 的 产品 展示 页 面 ， 如 图 14-2 所 示 。 
on 回电 六 汐 的 


:7 抬 夫 台 措 交 


Fashion 
公司 简介 ”展示 大 厅 ”数码 常识 。 手机 枚 赏 。 ”联系 我 们 


HOME PAGE ARABOUT US DEMONST RATION COMMON SENSE RAPPRECIATE CONTACT US 


诺基亚 N95 8GB 

外 观 设计 

产品 名 称 诺基亚 N95 8GB 
产品 天 线 内 置 

机 身 颜色 黑色 

产品 尺寸 99x20x53 富 米 
手机 迁 脐 120 g 

外 观 设 计 滑 盖 


LG KF310 


外 观 设 计 

产品 名 称 LG KF510 
产品 天 线 内 置 

机 身 颜色 红色 ， 永 色 

产品 尺寸 104.5x49.5x10.9mm 
手机 重量 91 克 

外 观 设计 滑 盖 


三 星 SGH-U908*Souf* 


外 观 设计 

产品 名 称 三 星 SGH-U908”S$ouf 
机 身 颜 色 涨 金色 

手机 重量 12.9mm 

外 观 设 证 诊 羡 


索尼 爱立信 W910i 


外 观 设计 

产品 名 称 索尼 爱立信 W910i 
产品 天 线 内 置 

机 身 颜 色 和 红色、 黑色 

产品 尺寸 99.5x 50x12.5 
手机 重量 86 

外 观 设计 滑 盖 


版 根 所 有 : 品 尚 电子 数码 


14-2 手机 鉴赏 展示 页 面 
14.2 网 站 策划 


产品 是 企业 的 命脉 , 将 产品 通过 网 站 展示 出 来 是 企业 网 站 建设 永恒 的 主题 。 不 同行 业 、 
不 同 规模 的 企业 ， 其 网 站 上 的 产品 展示 方式 或 手法 各 有 不 同 ， 千 变 万 化 。 在 网 站 策划 中 ， 
如 何 将 企业 的 产品 展示 规划 好 ， 是 该 网 站 策划 能 否 符合 企业 实际 ， 得 到 企业 认同 的 重要 内 
容 。 
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让 交 投 款 玲 实 创 直 韦 


14.2.1 确定 网 站 色彩 
无 论 是 平面 设计 ， 还 是 网 页 设计 ， 人 色彩 永远 是 最 午 要 的 一 环 。 当 我 们 距离 显示 屏 较 远 


的 时 候 ， 看 到 的 不 是 优美 的 版 式 或 者 美丽 的 图 片 ， 而 是 网 页 的 色彩 

本 网 站 展示 的 产品 是 时 尚 的 数码 产品 ， 其 中 包括 DC、MP4、 TH 在 整个 色谱 里 ， 
柱 色 是 最 次 眼 的 色彩 ， 给 人 以 华 员 而 温暖 、 兴 耕 而 热烈 的 感觉 令 人 振奋 的 磊 色 ， 具 
es es ee 
站 ， 属 于 导 喧 、 疆 草 的 闫 色 。 因 此 ， 本 实例 的 网 站 色彩 主要 以 众 黄 色 为 主 。 


14. 2.2 网 站 主要 功能 页 面 


尽管 每 个 企业 网 站 规模 不 同 ， 表 现形 式 各 有 特色 ， 但 从 经 营 的 实质 上 来 说 ， 都 想 达 到 
为 企业 或 产品 做 宣传 的 目的 ， 因 此 企业 网 站 又 有 许多 共性 的 东西 。 信 息 发 布 型 企业 网 站 应 
该 包括 以 下 主要 功能 页 面 。 

1. 网 站 首页 

首页 是 一 个 网 站 的 门面 ， 也 是 最 重要 的 一 人 们 都 将 首页 作为 体现 公司 形象 的 重 中 
之 重 ， 也 是 网 站 所 有 信息 的 归 类 目录 或 分 类 缩影 ， 如 图 14-1 所 示 。 

2. 公司 概况 

公司 概况 包括 公司 背景 、 发 展 历史 、 主 要 业绩 及 组 织 结构 等 ， 让 访问 者 对 公司 的 情况 
有 一 个 概括 的 了 解 。 

3: 产品 目录 

该 栏目 主要 提供 公司 产品 和 服务 的 目录 ， 方 便 顾 客 在 网 上 人 查看。 根据 需 0 
料 的 详 简 程度 ， 或 者 配 以 图 片 、 视 频 和 音频 等 。 但 在 公布 有 关 技 术 资 料 时 应 注意 保密 
免 为 竞争 对 手 所 利用 ， 造 成 不 必要 的 损失 。 

二 虽 币 识 

提供 公司 最 近 的 一 些 发 展 动 态 与 决策 的 变化 ， 以 及 提供 公司 产品 的 鉴 近 与 需求 信息 ， 
便于 客户 更 深入 地 了 解 公 司 和 产品 信息 ， 对 开展 网 络 彰 销 会 起 到 推动 作 
用 。 

5. 联系 信息 

网 站 上 应 该 提供 足够 详尽 的 联系 信息 ， 除 了 公司 的 地 址 、 电 话 、 传 真 、 邮 政 编码 、 网 
管 Email 地 址 等 基本 信息 之 外 ， 最 好 能 详细 地 列 出 客户 或 者 业务 伙伴 可 能 需要 联系 的 具体 
部 门 的 联系 方式 。 

对 于 有 分 支 机 构 的 企业 ， 同 时 还 应 当 有 各 地 分 支 机 构 的 联系 方式 ， 在 为 用 户 提 供 方 便 
的 同时 ， 也 起 到 了 对 各 地 业务 的 文 持 作 用 。 

当然 ， 上 述 基本 信息 仅仅 是 企业 网 站 应 该 关注 的 基本 内 容 ， 并 非 每 个 企业 网 站 都 必须 
涉及 。 同 时 也 有 部 分 内 容 并 没有 罗列 进去 ，WEB 设计 人 员 在 建站 时 要 根据 具体 情况 作 具 
体 分 析 。 在 规划 设计 一 个 具体 网 站 时 ， 应 主要 考虑 企业 本 身 的 目标 以 决定 网 站 功能 导 折 
让 企业 上 网 成 为 整体 成 略 的 一 个 有 机 组 成 部 分 ， 让 网 站 真正 成 为 有 效 的 品牌 宣传 阵地 、 有 
效 的 营销 工具 和 有 效 的 网 上 销售 场所 。 
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14.3 ”准备 工作 


在 正式 制作 网 页 之 前 ， 还 有 一 些 准备 工作 要 做 ， 例 如 收集 资料 、 人 处理 网 页 图 像 效 果 、 
eR 

网 页 制作 中 有 许多 产品 图 像 需 要 处 理 ， 图 像 的 外 形 能 使 页 面 的 气氛 发 生变 化 ， 并 直接 
影 啊 浏 览 者 的 兴趣 。 一 般 而 言 ， 方 形 稳定 、 严 肃 ， 三 角形 锐利 ， 圆 形 或 曲线 柔软 亲切 ， 退 
底 图 及 一 些 不 规则 或 不 带 边 框 的 图 像 活泼 。 处 理 网 页 图 像 比 较 简 单 ， 一 般 只 需要 调整 一 下 
图 像 的 腕 度 / 对 比 度 、 裁 甬 图 像 大 小 和 优化 多 像 质 量 既 可 。 有 时 再 加 上 一 定 的 效果 (如 边框 、 
明 影 等 )， 使 得 图 像 有 种 立体 的 感觉 。 有 关 图 像 处 理 的 具体 方法 ， 读 者 可 以 参阅 图 像 处 理 
软件 的 相关 资料 ， 本 章 不 作 详 细 介 绍 。 

处 理 完 本 网 站 所 和 需 图 片 的 图 像 效 果 之 后 ， 束 可 以 在 Dreamweaver 中 创建 站 点 ， 开 始 制 
作 网 页 了 。 


14.4 ”使 用 表格 布局 网 页 


在 本 书 前 面 的 划 节 中 提 到 网 页 布局 有 三 种 方式 , 分 别 是 表格 布局 、 DIV+CSS 布局 和 框 
架 布 局 。 为 了 方便 更 多 的 初学 者 掌握 网 页 内 容 的 编排 ， 本 实例 将 采用 表格 布局 方式 进行 操 
作 。 


14.4.1 制作 网 站 首页 


当 浏 览 考 登陆 到 一 个 网 站 时 ， 看 到 的 第 一 个 页 面 惑 是 该 网 站 的 首页 。 首 页 是 一 个 网 站 
的 第 一 页 ， 也 是 最 重要 的 一 页 。 所 以 在 制作 首页 的 时 候 一 般 都 利用 精美 的 钢 片 、 动 男 等 
段 ， 力 求 体现 完美 的 公司 形象 。 

01. 新 建 一 个 HTML 页 面 ， 命 名 为 index.html。 执 行 “修改 ”|“ 页 面 属性 ”命令 ， 
打开 “页 面 属性 ”对 话 框 ， 设 置 文本 大 小 为 12， 文 本 颜色 为 #666.“ 链 接 颜 色 ” 为 #O0OE， 
“已 访问 链接 ”为 #4600,“ 活 动 链接 ”为 村 30， 且 “始终 无 下 划 线 ”。 

02 将 光标 置 于 空白 页 面 处 ， 执行 “搬入”/“ 表 格 ” 末 单 命令 ,插入 一 个 1 行 1 列 
的 表格 ， 壳 度 为 100%， 边 框 粗细 为 0。 在 属性 面板 中 将 其 命名 为 tablel,“ 填 充 ” 和 “ 间 
距 ” 均 为 0， 对 齐 方式 为 “居中 对 齐 ”。 

03 昌 将 光标 置 于 表格 内 ， 单 击 属性 面板 上 的 | 中 5ss 按钮 ， 然 后 在 “目标 规则 ”下 拉 
列表 中 选择 “新 CSS 规则 ”， 单 击 “ 编 辑 规则 ”按钮 打开 “新 建 CSS 规则 ”对 话 框 。 在 “ 选 
择 堪 类 型 ”下 拉 列 表 中 选择 “类 ” 在 “选择 需 名 称 ” 文 本 框 中 输入 .backsground1， 然 后 单 
击 “ 人 确定 ”按钮 打开 对 应 的 规则 定义 对 话 框 。 

04 生 在 对 话 框 左 侧 的 分 类 列表 中 选择 “背景 ”， 然 后 单 击 “浏览 ”按钮 ， 在 打开 的 对 
话 框 中 选择 images/002.gif， 单 击 “ 确 定 ” 按 钮 插入 图 像 ， 调 整 单 元 格 高 度 为 336， 如 图 14-3 
所 示 。 

03 将 光标 置 于 表格 内 , 设置 水 平 对 齐 方式 为 “居中 对 齐 ” 垂直 对 章 方式 为 “顶端 凡 
执行 “插入 ”/“ 表 格 ”菜单 命令 ,插入 一 个 1 行 3 列 、 宽 度 为 760 像素 的 表格 ， 然 后 在 属 
性 面板 上 的 “对 齐 ” 下 拉 列 表 中 选择 “居中 对 章 ” 如 图 14-4 所 示 。 
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> 六 和 半 泪 于 加 车 扎 娘 b1 波 


| 


ES 
ee 


head> [stvle) RJA ~ 站 


图 14-3 ”插入 表格 及 背景 岁 像 


徐 < 和 lb pee rb rie Fr, ml HE RL 


i 
于 


ed 0ni 拉 


图 14-4 插入 1 行 3 列 的 表格 
06 将 光标 置 于 表格 的 第 1 列 ， 设 置 单元 格 内 容 水 平 对 齐 方式 为 “ 右 对 齐 ”， 垂 直 对 
章 方式 为 “顶端 ”， 执 行 “ 插 入 ”/“ 图 像 ” 合 令 ， ee i 


pe ey 2.jpg; 同样 设置 第 3 列 单元 格 内 容 水 平 “ 堪 对 齐 ” 王 直 “顶端 ”对 章 ， 
后 插入 图 像 images/zhubao_4.jpg， 插 入 图 像 后 的 页 面 效果 如 图 14-5 所 示 。 


面 
| C:\Inetpub\wwroot\company \indez. html (XHTHL)* 


oar Ctable.. XU Cat [RN 可 Qi v| 加 [Bl) 634 x 338v 11 K /1 5 Unicode (UTF-8) 


图 14-5 插入 图 像 
07 将 光标 置 于 表格 的 第 2 列 ， 设 置 单 元 格 内 容 水 平 “ 居 中 对 齐 ” 年 直 “ 顶 端 ” 对 
齐 ， 执 行 “ 插 入 ”/“ 表 格 ” 人 命令， 在 第 2 列 的 单元 格 中 风 套 一 个 3 行 1 列 、 宽 度 为 744 


区 JelaeuU9 


像素 的 表格 ， 并 在 属性 面板 上 将 其 命名 为 table2, “填充” 和 “间距 ” 均 为 0。 然后 将 光标 
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位 于 表格 第 1 行内 ， 设 置 捍 元 格 内 容 水 平 “ 大 中 对 章 ”， 垩 直 “ 顶 闹 ” 对 章 ， 插 入 图 像 
images/zhubao_3.jpg， 此 时 的 页 耐 效 果 如 图 14-6 所 示 。 


,| C:\Inetpub\wwwroot\companry \indez. html (XHTYL)* 


. r> Xtd...> Ctable> Ctr> <td> <table... > <tr> <td>Kimg 回 加 [| 787 x 355v 31 K / 1 秒 Unicode (VTF-8) 


14-6 插入 表格 及 图 像 


&08 同样 将 光标 位 于 表格 的 第 2 行内 ， 执 行 “ 插 入 ”/“ 图 像 ” 菜 单 命令 ， 在 打开 的 
对 话 框 中 选择 GIF 动画 文件 images/2.gif， 然 后 单 击 “ 确 定 ” 按 钮 插入 图 像 文 件 ， 如 图 14-7 
所 示 。 


电 Qulity 
5 


一- 一 可 | 


OC 人 人 人 人 人 人 人 人 人 人 人 人 人 一 OO 
IGCC AI FAI OAD RI [AQ or ~ Tor x 5 71K /2 Wieode OTI-0) 


D> 注 竺 小 计 加 长 也 师 YT 泪 


SHAN 
Eu 


14-7 插入 GIF 动画 


ELo9) 将 光标 置 于 表格 的 第 3 行内 ,执行 “插入 ”/“ 表 格 ” 命 令 ， 典 套 一 个 宽度 为 744 
像素 、1 行 6 列 的 表格 ,“ 填 充 ” 和 “间距 ” 均 为 0， 如 图 14-8 所 示 。 


| [TI me eesmpa rT Viner, ham [ERTL 


a | | rr TE hist Or 
14-8 插入 1 行 6 列 表格 
机 10 和 选中 所 有 单元 格 ， 设 置 单 元 格 内 容 水 平 “ 居 中 对 齐 ” 垂直 “居中 ”对 齐 ， 将 光 
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GT (TXB 守 交 了 纳 你 蕉 宽 创 发 在 


际 置 于 每 一 个 单元 格 内 ， 插入 相应 的 导航 图 像 ， 如 网 14-9 所 示 。 


曙 C:\Inetpub\wwroot\company \indez. html (XHTYL)* 


Qulity 
Fashion 
公司 简介 展示 大 厅 数码 常识 


i a 2 
Eee I 
body> <table... > <tr> Ctd... > <table> <tr> <td> [img 回 男 [|] 787 x 355v 97 K /3 秒 Unicode (VTF-8) ..: 


14-9 插入 导航 图 像 


和 11 和 将 光标 置 于 此 表格 的 下 方 , 插入 一 个 1 行 1 列 的 表格 , 然后 在 属性 面板 上 将 “高 ” 
度 设 置 为 6， 并 且 设 置 背 景 闫 色 为 #b0b0b0， 如 图 14-10 所 示 。 


| ?WT Pub ee Vm at VT Va bial (rnTNLLg 


Qulity 2 
Fashion ”人 人 和 
公司 简介 。 居 示 大 厅 。 数码 常识 。 手机 监 沉 联系 我 人 


ead 


Di | 
eds A El dts lay rt aL: | + 了 而 周 出 TH 5 RE ied MMT-6] 


14-10 ”添加 背景 颜色 


412 有 将 光标 置 于 tablel 的 下 方 ， 执 行 “ 插 入 ”/“ 表 格 ” 命 令 ， 插 入 一 个 3 行 2 列 ， 
宽度 为 744 像素 的 表格 , 然后 在 属性 面板 上 将 其 命名 为 table3, “对 齐 ” 方 式 为 “居中 对 齐 ”。 
这 中 表格 第 2 列 的 3 个 单元 格 ， 在 “属性 ”面板 中 单 击 “ 合 并 单元 格 ” 按 茹 国 将 其 合并 ， 
如 图 14-11 所 示 。 


克 C:\Inetpub\wwwroot\companr \indez. html (XHTHL)* 


如 49YQBYD 


bodv> table#table3> <tr>[<ta [Rw foo% v| 回回 [| 787 x 355v 98 K / 3 秒 Unicode (UTF-8) 


14-11 合并 单元 格 
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1 引 将 光标 置 于 表格 第 1 行 左边 单元 格 内 , 设置 单元 格 内 容 水 平 “ 左 对 齐 ” 垂直 “项 
闹 ” 对 齐 ， 执 行 “ 插 入 ”/“ 表 格 ” 命 令 ， 骸 僚 一 个 3 行 2 列 的 表格 ， 筑 度 为 98%,“ 措 充 ” 
和 “间距 ” 均 为 0， 将 光标 置 于 藤 套 表格 的 第 2 行 ， 选 中 左右 单元 格 将 其 合并 ， 然 后 设置 
单元 格 内 容 水 平 “ 左 对 齐 ”， 垂直“ 居中” 对齐 ， 并 且 插 入 网 像 images/zhubao_23.jpg， 如 
图 14-20 所 示 。 


面 
遇 -: \Inetpub\wwwroot\company \indez. html 〔XKHTL] 沙 -=X 


Fashion 
展示 大 厅 “数码 常识 
DEMONSTRRTION COMMON SENSE 


人 body> <table.. .><tr><td><table><tr><td>[<imgy [Rio vv 器 男 [|] 787 x 355v 102 K / 3 秒 Unicode (UTF-8) | 


图 14-12 合并 单元 格 及 插入 图 像 
14 将 光标 置 于 杠 套 表格 第 3 行 的 左边 单元 格 内 ， 设 置 单元 格 内 容 水 平 “ 左 对 齐 ”， 


垂 百 “了 顶端” 对齐， 插入 图 像 images/005.gif; 光标 位 于 右边 单元 格 内 ， 设 置 单元 格 内 容 水 
平 “ 居 中 对 齐 ” 垂直 “顶端 ”对 齐 ， 般 套 一 个 1 行 1 列 、 宽 上 度 为 98 多 的 表格 ， 并 输入 相 


关 的 文字 信息 ， 如 图 14-13 所 示 。 


EE C:\Inetpub\wwroot\company \indez. html (XHTHL)* = : 
Qulity 。 
Fashion 


> 洲 半 小 卉 男 革 入 ” 超 y[ 洲 


口 


司 快速 网 


了 [T=1 女人 J J 2 El 
: 浮 加 数码 产品 的 生产 和 销售 企业 ， 公司 成 立 仇 始 就 | 


准 、 一 流 的 设备 、 产品 质量 立足 市 场 ，3 年 
: 沽 ， 拥有 一 批 国内 知名 企业 客户 ， 以 产品 质量 稿 定 、 变 货 必 
洁 服务 好 受到 客 矿 的 [ 泛 芝 党 
<bodv> <table#table3> [9 , 100% v| 回 加 [| 787 x 355 104XK/A3 秒 Unicode QTF-6) 


图 14-13 插入 图 像 及 输入 文字 信息 


15 将 光标 置 于 table3 第 2 行 左 边 的 单元 格 内 ， 设 置 单元 格 内 容 水平 “ 左 对 齐 ” 重 
二 “项 病 ” 对 齐 ， 执 行 “ 插 入 ”/“ 表 格 ” 人 命令， 插入 一 个 3 行 4 列 的 表格 ,“ 间 距 ” 为 5、 
宽度 为 98%。 然 后 选中 第 1 行 的 每 个 单元 格 将 其 合并 ， 设 置 单 元 格 内 容 水 平 “ 左 对 齐 ” 
垂直 “顶端 ”对 齐 ， 并 且 插 入 图 像 images/zhubao_26.jpg， 如 图 14-14 所 示 。 

16 将 光标 置 于 表格 第 2 行 的 第 1 列 单元 格 内 ， ee 
陈 均 为 “ 届 中 ” 执行 “插入 ”/“ 图 像 ”命令 ， 选 择 图 像 images/001.jpg， 早 击 “ 确 定 ” 电 
可 插入 。 将 光标 位 于 第 2 列 的 单元 格 内 ， 骸 套 一 个 2 行 1 列 的 表格 ,“ 填 充 ” 和 “ sh 
均 为 5， 并 输入 相关 的 文学 信息 ， 如 图 14-15 所 未 。 
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图 14-14 合并 单元 格 及 插入 图 像 
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图 14-15 插入 图 像 及 输入 文子 


1 图 | 


17 按照 上 一 步 同样 的 步骤 ， 在 单元 格 中 插入 其 他 产品 图 片 及 文本 ， 


14-16 所 示 。 


旷 C:\Inetpub\wwwroot\companr \indez. html (XHTYL) 


<bodv> <table#table3> <tr>|<td [NR ey a li00% v| 回 男 | 787 x 355 


图 14-16 插入 图 像 及 输入 文子 


和 3 行 左 边 的 单元 格 内 ， 
/“ 表 格 ” 命 令 ， 插 入 一 个 2 行 4 列 的 表格 ， 


18 将 光标 置 于 table3 第 
直 “ 顶 端 ” 对 齐 ， 执行 “插入 ” 
距 ” 均 为 5。 光标 选中 第 
如 图 14-17 所 示 。 
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yl JSYQABYD 


116 K 2 3 秒 ‘Unicode QUTF-8)| ;: 


设置 单元 格 内 容 水 平 “ 左 对 齐 ” 


i 


页 面 效 未 如 


午 
填充” 和 “ 间 


1 行 的 全 部 单元 格 并 合并 , 在 其 中 插入 图 像 images/zhubao_28.jpg， 


入 
央 c:\inetpub\wwroot\conpanr \indez. html (XHTHL)* = 


Bl x 


sm odv> <table... > Ctr> <td> <table> <tr> <td>[Kime) [R] 节 Q ll00% v| 回 国 [ T87 x 355 119KY3 秒 Unicode (UTF-8) 


图 14-17 合并 单元 格 及 插入 图 像 


19 将 光标 置 于 表格 第 2 行 的 每 一 个 单元 格 ， 设 置 单元 格 内 容 水 平和 垂直 对 齐 方 式 
均 为 “大 中 ”分 列 插入 相关 的 图 像 ， 如 图 14-18 所 示 。 


全 (XHTHL) = 
一 一 一 一 一 一 一 一 一 一- 一 


v 


aa able#tabl 3y Ctr >Ktay GE 二 100% ~| 画 国 [i 787 x 355 142 K / 3 秒 | Unicode (TFT- 8) 


图 14-18 插入 图 像 


20， 将 光标 置 于 table3 的 第 2 列 ， 设 置 单元 格 内 容 水 平 “ 右 对 齐 ” 垂直 “底部 ”对 
齐 ， 执 行 “ 插 入 ”/“ 图 像 ” 命 令 ， 在 打开 的 对 话 框 中 选择 图 像 images/zhubao_21.gif， 单 
击 “ 确 定 ” 按 钮 后 搬入， 如 图 14-19 所 示 。 


[a 
乓 ci\inetpub\wrwroot\company \indez. html (XHTHL) * Ex 


5 able#table3> <tr> <td> GE Qlloox v| 国 辐 [|] 787 x 355 (160 K / 4 秒 Unicode (VTF- 3 


图 14-19 插入 图 像 
21 将 光标 置 于 整个 table3 的 下 方 ， 执 行 “ 插 入 ”/“ 表 格 ” 命 令 ， 插 入 一 个 1 行 1 
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六 


》 潍 于 中 民 避 后 应 二 订 小 


口 


列 


[LDbaeerneoemwar CYB 守 交 届 保 准 实 例 季 在 
列 宽 为 100% 的 表格 ， 对 齐 方式 为 “居中 对 齐 ” 将 光标 置 于 表格 内 ， 新 建 一 个 CSS 规则 ， 
为 表格 设置 背景 图 像 images/003.gif， 如 图 14-20 所 示 。 


画 -- Inetpub\wwwroot\company \indez. html (XHTNL)* EL 


body> [RID QQ 100% ~v 回 辐 [| 787 x 355v 160 K / 4 秒 Unicode (UTF-8) 


图 14-20 插入 表格 及 背景 图 像 


22 将 光标 置 于 表格 内 , 插入 一 个 1 行 2 列 的 表格 , 宽度 为 744 像素 , 对 齐 方 式 为 “ 居 
中 对 齐 ” 将 光标 位 于 第 1 列 内 , 将 背景 闫 色 设 置 为 #fbe00, 水 平 “ 左 对 章 ” 生生 “后 中 风 
然后 插入 图 像 images/004.gif， 如 图 14-21 所 示 。 


EE ‘Inetpub\wwroot\companr \indez. html (XHTHL)* = Ele 


51 (16D) 


号 CT DR td [RD Io0% ~v| 回 加 [村] 787 x 355 181 K /4 秒 | Unicode (WTF- 6) 四 


图 14-21 插入 图 像 


23 将 光标 置 于 表格 的 第 2 列 ， 新 建 CSS 规则 设置 背景 图 像 images/zhubao_33.jpg， 
文本 的 对 并 方式 为 居中 ， 且 文本 闫 色 为 日 色 ， 然后 输入 相关 的 文学 信息 ， 如 图 14-22 所 未 。 


画 : C:AIretpubwwmwrooteompanyAirdez. html [HTCL] 沙 


区 JelaeU9 


了 151i016 习 关 二 ss 587 (579) 


版 权 所 有 : 品 尚 电子 数码 


yetley Ctr> td. .><table><tr><td .SLspan...> [NR|Y lo v| 回转 大 787:355 | 162 K / 4 秒 | Unicode (UTF- 83) 
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14-22 设置 背景 图 像 并 输入 文本 


至 此 ， 整 个 页 和 面 制作 完毕 ， 最 后 效果 如 图 14-23 所 示 。 

接 下 来 为 导航 图 片 添 加 链接 。 默 认 情 况 下 ， 为 导航 图 片 添 加 超级 链接 之 后 ， 在 页 面 中 
预览 时 会 显示 图 片 边框 ， 影 响 美 观 。 以 下 步骤 新 建 规则 去 掉 边 框 。 

&24] 打 开 “CSS 样式 ”面板 ， 单 击 “ 新 建 CSS 规则 ”按钮 新 建 一 个 CSS 规则 ， 选 择 
器 类 型 选择 “类 ”， 选 择 器 名 称 为 imgborder， 规 则 定义 位 置 选 择 “ 新 建 样 式 表 ”， 单 击 “ 确 
定 ” 按 钮 在 打开 的 对 话 框 中 指定 样式 表 名 称 为 Imgborder。 

和 25 且 单 击 “保存 ”按钮 打开 规则 定义 对 话 框 ， 选 择 “ 边 框 ” 分 类 ， 设 置 边 框 类 型 为 
none、 宽 度 为 0px， 然 后 单 击 “确定 ” 按 钮 关闭 对 话 框 。 


26 | 选中 导航 图 片 “ 首 页 ”在 属性 面板 上 的 “类 ”下 拉 列 表 中 选择 样式 imgborder。 
27 按照 上 一 步 的 方法 ， 为 其 他 导航 图 片 应 用 样式 。 然 后 保存 文件 。 
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14. 4. 2 制作 手机 展示 页 面 


网 站 首页 制作 完成 后 ， 进 入 二 级 页 面 的 设计 与 编排 。 二 级 页 面 的 设计 与 首页 的 设计 方 
法 相同 ， 主 要 是 把 握 色 彩 ， 使 之 与 首页 的 风格 与 色彩 保持 统一 。 
制作 手机 鉴赏 页 面 的 操作 步骤 如 下 : 

0 全 新 建 一 个 空白 的 HTML 文档 ， 保 存 为 jianshang.html。 

0 各 执行 “修改 ”/ “页面 属性 ”命令 ， 在 打开 的 “页 面 属性 ”对 话 框 中 设置 字体 大 
小 为 12 像素 ,文本 颜色 为 #666， 左 边 距 、 上 边 距 等 都 为 0。 “链接 颜色 ”为 #400F,“ 已 访问 
链接 ”为 #600,“ 活 动 链接 ”为 丁 30， 且 “始终 无 下 划 线 ”。 

03 执行 “插入 ”/“ 表 格 ” 命 令 ， 在 页 面 中 插入 一 个 1 行 1 列 、 宽 为 100%、 边 框 
为 0、“ 间 距 ” 和 “填充 ” 均 为 0 的 表格 ， 对 齐 方式 为 “居中 对 齐 ” 

04 将 光标 定位 在 新 表格 的 单元 格 中 , 在 属性 面板 中 设置 单元 格 的 高 为 221, 单元 格 
内 容 的 水 平 对 齐 方式 为 “居中 对 齐 ” 垂直 对 齐 方式 为 “顶端 ” 然后 新 建 CSS 规则 将 单元 
格 的 背景 图 像 设置 为 image/006.g 直 。 效 末 如 图 14-24 所 示 。 
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图 14-24 ”插入 单元 格 背 景 图 像 


03 和 执行 “插入 ”/“ 表 格 ” 命 令 ， 在 单元 格 中 网 入 一 个 1 行 3 列 ,、 宽 为 760 像素 、 
边 距 和 间距 均 为 0 的 表格 。 

06 设置 新 表格 的 第 1 个 单元 格 内 容 水 平 “ 右 对 齐 ” 垂直“ 顶端” 对齐， 宽度 为 
8px; 设置 第 3 个 单元 格 内 容 水 平 “ 左 对 齐 ”, 垂直 “顶端 ”, 宽 为 8px; 然后 将 图 像 image/008.gif 
与 image/007.gif 分 she A a 效果 如 图 14-25 所 示 。 
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07 将 光标 定位 在 中 间 的 单元 格 里 ， 在 属性 面板 中 设置 水 平 “ 居 中 对 齐 ” 垂直 “项 
端 ”， 并 执行 “插入 ”/“ 表 格 ” 命 令 ， 将 一 个 4 行 1 列 、 宽 为 100%、“ 间 距 ” 和 “填充 ” 
均 为 0 的 表格 能 入 该 单元 格 中 。 

08 将 光标 移 至 新 表格 的 第 1 个 单元 格 中 ， 设 置 单元 格 内 容 水 平 “ 居 中 对 齐 ”， 亚 下 
“顶端 ”对 章 ， 执 行 “ 插 入 ”/“ 图 像 ” 命 令 ， 将 图 像 image/006.jpg 插入 到 单元 格 中 ， 如 
14-26 所 示 。 


ES ee ee EE Ee 
= inetpob\ ero \ cony \ biey 《XI Ox 
一 一 


的 问 电 洲 数 的 
和 am 


3 加 pn35 ZE/1M Woiecete (WTF-6) 


图 14-26 插入 图 像 
03 昌 将 光标 移 全 新 表格 的 第 2 个 单元 格 中 ， 执 行 “ 插 入 ”/“ 图 像 ”命令 ， 将 GIF 动 


男 image/3.g 计 插入 到 单元 格 中 ， 效 果 如 网 14-27 所 示 。 
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图 14-27 插入 GIF 动画 


10 将 光标 移 至 新 表格 的 第 3 行 单元 格 ， 执 行 “ 插 入 ”/“ 表 格 ” 命 令 ， 将 一 个 1 行 
6 列 、 宽 100%、“ 间 距 ” 和 “填充 ” 均 为 0 的 表格 插入 到 该 单元 格 中 。 选 中 所 有 单元 格 ， 
在 属性 面板 上 设置 单元 格 内 容 水 平 “ 居 中 对 章 ” 垂下“ 居中” 对齐 。 

11 和 9 将 光标 定位 在 第 1 个 单元 格 中 ， 执 行 “ 插 入 ”/“ 图 像 ” 命 令 ， 将 图 像 
image/zhubao_11.jpg 插入 到 该 单元 格 中 ， 效 末 如 图 14-28 所 示 。 

125 使 用 同样 的 方法 将 其 他 的 导航 图 像 插入 到 其 余 单元 格 中 ， 效 果 如 网 14-29 所 示 。 

13 将 光标 移 至 最 后 一 行 单元 格 , 在 属性 面板 中 设置 背景 闫 色 为 #b0b0b0、 高 为 6px。 
然后 切换 到 “代码 ”视图 中 ， 删 除 单 元 格 中 的 空格 符 ， 如 图 14-30 所 示 。 

14 在 属性 面板 上 单 击 “ 刷 新 ”按钮 ， 然 后 切换 到 “设计 ”视图 中 ， 此 时 的 页 面 效 
果 如 图 14-31 所 示 。 

15 将 光标 移 至 表格 底部 ,执行 “插入 ”/“ 表 格 ” 命 令 ， 在 页 面 中 插入 一 个 1 行 2 列 、 
宽 为 744 的 表格 。 选 中 该 表格 ， 在 属性 面板 中 设置 对 齐 方式 为 “居中 对 齐 ”。 
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14-28 插入 图 像 
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14-31 ”页面 效果 


16 | 将 光标 定位 在 新 表格 的 第 1 列 单元 格 中 , 在 属性 面板 上 设置 单元 格 宽 为 193， 高 
为 490,“ 水 平 ” 对齐 方式 为 “ 雹 对 齐 ”“ 垂 下 ”对 齐 方式 为 “ 顶 站 ” 执行 “搬入 ”/“ 和 夫 
格 ” 命 令 ， 在 单元 格 中 捅 入 一 个 3 行 1 列 、 宽 为 100%% 的 表格 。 效 来 如 图 14-32 所 示 。 


[a 
需 c:\inetpub\wwroot\conpanr \jianshane. html (XHTNL)* Mal 


Di 名 电 溯 效 的 


i v 


辐 | 画 
bodv> <table> <tr>[<tay [是 区 vl 回回 | 785 x 455v 70 K /2 秒 Unicode (UTF-8)| .. 


14-32 ”插入 表格 


17 | 选 定 当 前 表格 中 的 所 有 单元 格 ， 在 属性 面板 上 设置 单元 格 的 背景 闫 色 为 
#FFCE3F。 

18 将 光标 定位 在 新 表格 的 第 1 行 单元 格 中 ， 设 置 单元 格 内 容 水 平 “ 左 对 齐 ” 垂直 
“顶端 ” 对 齐 ， 执 行 “ 插 入 ”/“ 表 格 ” 命 令 ， 插 入 一 个 1 行 1 列 、 宽 为 178 像素 的 表格 。 

19 将 光标 定位 在 第 1 个 单元 格 中 ,执行 “插入 >/ 图 像 ” 命令, 将 图 像 image/01.jpg 
插入 到 该 单元 格 中 。 效 果 如 图 14-33 所 示 。 
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14-33 ”插入 图 像 


20 有 将 光标 定位 在 新 表格 的 下 方 ， 执 行 “插入 ”/“ 表 格 ” 命 令 ， 插 入 一 个 1 行 1 列 、 
宽 为 178 像素 的 表格 ， 然 后 在 属性 面板 上 设置 新 表格 的 背景 颜色 为 白色 。 

21 将 光标 定位 在 新 表格 的 单元 格 中 ,设置 单元 格 内 容 水 平 “ 左 对 齐 ”% 垂直 “顶端 ” 
对 齐 ， 执 行 “插入 ”/“ 表 格 ” 命 令 ， 插 入 一 个 8 行 2 列 、 宽 为 82% 的 表格 。 选 中 蔡 套 表格 
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第 1 列 的 所 有 单元 格 在 属性 面板 上 设置 高 为 25、 宽 为 10%。 效 果 如 图 14-34 所 示 。 
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14-34 ” 骸 僚 表格 


22 选 中 堪 套 表格 第 二 列 所 有 的 单元 格 ， 设 置 单元 格 内 容 水 平 “ 左 对 齐 ” 垂直 “ 居 
中 ”对 齐 ， 然 后 在 单元 格 中 输入 导航 文字 链接 ， 效 果 如 图 14-35 所 示 。 
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14-35 ”页 面 效 果 


23 月 将 光标 定位 在 第 2 行 单元 格 中 , 在 属性 面板 中 设置 “水 平 " 对 齐 方 式 为 “ 左 对 齐 ”， 
垂直 对 齐 水 平 为 “居中 ” 执行 “插入 ”/“ 图 像 ” 人 命令， 将 图 像 image/02.jpg 插入 到 单元 
格 中 ， 效 果 如 图 14-36 所 示 。 

24 月 将 光标 移 至 图 像 下 方 ， 插 入 一 个 3 行 1 列 、 宽 为 178 像素 的 表格 。 

25 将 光标 定位 在 新 表格 的 第 1 行 单元 格 中 , 设置“ 水平 ”对 齐 方式 为 “居中 对 齐 ”， 

“ 王 直 ”对 齐 方式 为 “ 压 部 ”执行 “插入 ”/“ 图 像 ” 命 令 ， 将 图 像 image/03.gif 插入 到 单 
元 格 中 。 

26 | 使 用 同样 的 方法 设置 新 表格 第 3 个 单元 格 的 水 平 对 齐 方式 为 “居中 对 齐 ”， 垂 直 
对 齐 方式 为 “顶端 ”"”， 将 图 像 image/04.gif 插入 到 单元 格 中 ， 效 果 如 网 14-37 所 示 。 

27 将 光标 定位 在 第 2 行 单元 格 中 ， 在 属性 面板 中 设置 其 背景 闫 色 为 本 FFFFF,“ 水 
平 ” 对 齐 方式 为 “居中 对 齐 ”“ 牌 直 ” 对 齐 方式 为 “居中 ”然后 执行 “插入 ”/“ 图 像 ” 
200 
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命令 ， 将 图 像 image/1007.gif 插 入 到 该 单元 格 中 ， 效 果 如 图 14-38 所 示 。 
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14-36 插入 网 像 
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14-37 页面 效果 
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14-38 插入 图 像 
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28 将 光标 定位 在 最 后 1 个 单元 格 中 ， 设 置 水 平 对 齐 方式 为 “ 右 对 齐 ”， 垂直 对 齐 方 
式 为 “ 顶 闹 ”然后 执行 “插入 ”/“ 图 像 ” 合 令 。 将 图 像 image/911.jpg 插入 到 访 单 元 格 中 ， 
效果 如 图 14-39 所 示 。 
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14-39 插入 图 像 


29 将 光标 定位 在 右 侧 的 单元 格 中 , 在 属性 面板 中 设置 水 平 对 齐 方式 为 “居中 对 齐 ”， 
王 直 对 章 方式 为 “顶端 ”。 执行 “插入 ”/“ 表 格 ” 命 令 ， 将 一 个 2 行 1 列 、 宽 为 100% 的 表 
格 插入 到 该 单元 格 中 。 
&3 虽 将 光标 移 至 新 表格 的 第 1 行 单元 格 中 ,在 属性 面板 中 设置 单元 格 “ 水 平 ”对 齐 方 
式 为 “居中 对 齐 ”“ 王 直 ” 对 齐 方式 为 “底部 ”高 为 42。 然 后 新 建 一 个 CSS 规划， 定义 
单元 格 背 景 图 像 为 image/1718.gif。 效 果 如 图 14-40 所 示 。 
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14-40 插入 背景 图 像 
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和 31 昌 执行 “插入 ”/“ 表 格 ” 命 令 ， 将 一 个 1 行 1 列 、 宽 为 518 像素 的 表格 插入 到 单 
元 格 中 。 

32 上 将 光标 定位 在 新 表格 的 单元 格 中 ， 在 属性 面板 中 设置 高 为 21， 然 后 新 建 CSS 规 
则 定义 背景 图 像 为 imnage/1.jpg， 文 字 颜 色 为 扯 60。 效 果 如 网 14-41 所 示 。 
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14-41 页 而 效果 
遇 33 有 将 光标 定位 在 第 2 行 的 单元 格 中 ， 设 置 单元 格 内 容 水 平 “居中 对 齐 ” 垂直 “项 
蜗 ” 对 章 ， 然 后 执行 “搬入”/“ 表 格 ” 命 令 ， 将 一 个 3 行 3 列 、 贤 为 96% 的 表格 插入 到 单 
元 格 中 。 
和 34 选 中 新 插入 的 表格 ， 在 属性 面板 中 设置 “间距 ”为 5。 效果 如 图 14-42 所 示 。 


换 C:\Inetpub\wwwroot\company \jianshang. html (XHTHL)* 


00i 电 六 效 的 


凶 愉 100% > 回转 恩 7865:x472 118 kK /3 秒 Unicode (UTF-8) 


图 14-42 插入 表格 
人 35D 选 中 新 表格 第 1 列 的 前 2 个 单元 格 ， 在 属性 面板 中 点 击 按钮 加 合并 单元 格 。 设 
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X 


于 下 于 习 必 上 贡 yT 址 


Dp 


7 


~ 
全 一 


Dvraemoyoevar COB 守 腕 限 堡 准 衬 创 委 条 
置 合并 的 单元 格 宽 为 32%, et ee “居中 ” 然后 执行 “搬入 ”/“ 图 像 ” 
命令 ， 将 图 像 image/101.jpg 插入 到 单元 格 中 ， 效 果 如 图 14-43 所 示 。 


1 : Es 
PBT Cr CU CPTI CT SATIS APTES < [NR | 回 加 [| 785 x 472 |122 K /3 秒 | Unicode mr-8) 


14-43 ”合并 单元 格 


36 设置 第 1 行 第 2 列 的 单元 格 内 容 水 平 对 齐 方式 为 “ 左 对 齐 ” 第 3 列 单元 格 水 平 
对 齐 方式 为 “ 右 对 齐 ” 然后 输入 相应 的 文本 。 

437 了 选中 第 2 行 的 第 2 列 单元 格 及 第 3 列 单元 格 , 单 击 属性 面板 中 的 按钮 回合 并 单元 
格 。 设 置 单元 格 内 容 水 平 对 齐 方式 为 “ 左 对 齐 ” 垂直 对 齐 方式 为 “顶端 ” 然后 在 合并 的 
单元 格 内 输入 手机 说 明文 字 ， 效 果 如 图 14-44 所 示 。 


雷 C:\Inetpub\wwroot\companr \jianshang. html [XKHTIL) 


Doi 外电 亡 六 的 


设计 

产品 名称 诺基亚 N95 3GB 
产品 天 线 内 置 

机 身 颜色 黑色 

产品 尺寸 99x20x53 语 米 
手机 重量 120 g 

外 观 设计 滑 盖 


yZETE《CEXUIZUARIOCEYZUICTEYCE7CUE ny 回 转 [ T85 x 472 122 Ki3 秒 Unicode i 
14-44 ”页 面 效果 
&3 人 使 用 同样 的 方法 ， 合 并 第 3 行 的 3 个 单元 格 ， 并 在 合并 后 的 单元 格 中 插入 一 个 1 
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如 49YQBYD 


行 1 列 、 宽 为 98 多 的 表格 。 选 中 表格 ， 在 属性 面板 中 设置 “对 齐 ” 方 式 为 “居中 对 齐 ”。 

39 四 将 光标 移 全 新 表格 的 单元 格 中 ， 在 属性 面板 中 设置 “局 ”为 1， 并 新 建 CSS 规则 
定义 背景 图 像 为 image/1005.gif。 然 后 切换 到 “代码 ”视图 中 ， 删 除 该 里 元 格 中 的 空格 符 ， 
如 图 14-45 所 示 。 单 击 属性 面板 上 的 “刷新 ” 投 钮 ， 返 回 “ 设 计 ” 视 网 。 


EE \Inetpub\wwroot\company \jianshang. html (XHTHL)* = EL 


<tQ colspan="2" align="left" valign=" top" "TT br > 


产品 名 称 诺基亚 N95 86B <br /> 


产品 尺寸 99x20x53 毫 米 <br /> 
手机 重量 120 g <br /> 
外 观 设 计 滑 盖 <br /> 


HEE 
< 
<tQ colspan="3" align="center" valign="middle"><table width="98*" border="O" 
cellspacing="O0" cellpadding="0"> 
<tr> 
<td height="1" class=ntr3bgr> 和 -ca> 

</tr> 

</:table></td> 

CHEEX 

</:table></td> 
i 
</table></td> 


> Ctr> <td> <table> Ctr> Ctd> Ctable> Ctr> Ctd> Ctable> Ctr>lta .. 122 K # 3 秒 Unicode (UTF-8) 
图 14-45 ”删除 空格 符 
4 嚼 选中 插入 了 网 片 和 文本 的 表格 并 复制 ， 将 光标 置 于 表格 右 侧 ， 然 后 按 下 Shift + 


Enter 键 ， 单 击 忌 标 右 键 ， 在 弹出 的 快捷 沫 单 中 选择 “粘贴 ”命令 。 重 复 粘 贴 命令 ， 此 时 
的 页 面 效 果 如 图 14-46 所 示 。 


EE [ee ei Ammwroot en Ee html Ee 六 


产品 名称 诺基亚 N95 8GB 
产品 天 线 内 置 

灿 身 颜色 黑色 

产品 尺寸 99x20x53 富 米 
手机 重量 120 g 


小 观 设计 滑 盖 


站 讽 流 Rr 

产品 名 称 诺基亚 N95 8GB 
产品 天 2 线 内 置 

灿 身 颜色 黑色 

产品 尺寸 99x20x53 毫 米 
手机 重量 120 g 


ph 观 设计 滑 盖 


小 观 设 二 

产品 名 称 诺基亚 N95 8GB 
产品 天 这 线 内 置 

机 身 颜 色 黑色 

产品 尺寸 99x20x53 富 米 
手机 重量 120 g 


sh; 观 设计 滑 盖 


[RD AQ lo0% v 回国 | 785 x 472 124 kK /3 秒 Unicode (UTF-8) 


图 14-46 页面 效 朱 
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p> 壮 半 获 蕴 田 后 入 ” 央 杂 洲 


口 


列 


如 JelaeU9 


emuYyenvar (EAXB 让 文 般 每 准 实 创 我 和 
41 修改 六 贴 所 得 单元 格 中 的 图 片 和 文本 。 

42 9 将 光标 定位 到 文档 压 部 ， 执 行 “ 插 入 ”/“ 表 格 ” 命 令 ， 在 页 面 乓 部 插入 一 个 1 
行 1 列 、 宽 为 100% 的 表格 。 将 光标 定位 在 新 表格 的 单元 格 中 ， 在 属性 面板 中 设置 “高 ” 
为 34， 水 平 对 章 方式 为 “居中 对 章 ” 然后 独 建 一 个 CSS 规则 设置 表格 的 背景 图 像 为 
image/003.g1f。 

必 43 月 执行 “插入 ”/“ 表 格 ” 命 令 ， 将 一 个 1 行 2 列 、 宽 为 744 像素 的 表格 插入 到 该 
单元 格 中 。 设 置 第 1 个 单元 格 的 宽 为 193， 背 景 颜色 为 在 FBE00， 水 平 对 齐 方式 为 “ 左 对 
齐 ”， 王 二 对 齐 方式 为 “底部 ?”， 并 在 单元 格 中 插入 图 像 image/004.gif。 

444 有 选中 第 二 个 单元 格 ， 新 建 CSS 规则 设置 第 2 个 单元 格 的 背景 图 像 为 
imasge/zhubao_33.jpg， 文 字 凑 色 为 #EFFFFF， 文 本 居中 ， 然 后 加 入 厂 权 声明 文字 。 


全 此 页 和 面 制作 基本 完成 ， 此 时 的 页 面 整体 效果 如 图 14-47 所 示 。 
史 疝 电 亡 效 的 


Qulity g 
Fashion 
首 页 司 简介 展示 大 厅 数码 常识 手机 鸣 党 联系 我 们 


ssvsvvwswwvvsvvvvvvvvvvvvvvvvvvsvvvvs 


: NNNNNNNNNVMNNNNNNNNNNNNNNNN NN NN NY : 2 ; : 站 
NN ND UO A 产品 名 称 诺基亚 N95 8GB 
: es 

产 产品 尺寸 99x20x53 毫 米 
Se : :: : 手机 二 120g 

外 观 设计 洽 盖 


vsSvvvvvvvvvvvvvvvvvvvvvvvvvvvvvov 


JsvARssssssssssvssvssvvsvvsvvsvv 
NN 
NNMMMMMMNMMMNNNNNNNN NN 

somos eer eos ooo sees oot oo 


Nooooooooeoseoooosooosoo seo oesooo ooosoeosos oooooooooooooosoooooosoosooro oreores 


EE ed 2 : 外观 设计 
产品 名称 LG KF510 

潮 身 颜色 红色 ， 京 色 

产品 尺寸 104.5x49.5x10.9rwm 

手机 重量 91 

小 观 设 计 滑 盖 


vvsvvssvvvssvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvsvsv YY 


三 星 SGH-U9808“Soul” 详细 参数 


oo 


站 观 设计 

产品 名 称 三 星 SGH-U908"*Soul 
机 身 颜 色 滩 金 色 

省 机 重量 12.9xam 

站 观 设计 滑 盖 


ooo i 。。 


wwvwvvvsvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvov 


:站 观 设 计 

产品 名 称 索尼 爱立信 W910i 
产品 天 

小 身 颜色 红色 、 黑 色 
产品 尺寸 99.5x50x12.5 
浅 机 重量 86 

外观 设计 滑 盖 


NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN ANNNN NNNNN NN NNNNNNNNNNNNNNNNNN NNNNNNNNNN NNNNNNNNN NNNNNNNNNNNN NNNNNNNNN NNNNNNNNNN 


14-47 页 和 面 整体 效果 
接 下 来 为 导航 图 片 添 加 链接 。 在 上 一 节制 作 首 页 时 ， 已 定义 了 疼 片 边框 样式 ， 接 下 来 
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的 步骤 将 样式 表 imgborder.css 链接 到 当前 页 面 。 

45 四 打开 “CSS 样式 ”面板 ， 单 击 “ 附 加 样式 表 ” 按 钮 鳞 打 开 “ 链 接 外 部 样式 表 ” 
对 话 框 。 

46. 单 击 “ 文 件 /URL” 文 本 框 右 侧 的 “浏览 ”按钮 ， 找 到 上 一 第 定义 的 样式 表 文 件 
imgbordercss。 其 他 保留 默认 设置 ， 然 后 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 

4 和 5 选中 导航 图 片 “ 首 页 ” 在 属性 面板 上 的 “类 ”下 拉 列 表 中 选择 样式 imgborder。 
按照 上 一 步 的 方法 ， 为 其 他 导航 图 族 应 用 样式 。 然 后 保存 文件 。 


14.5 ”思考 题 


1. 在 图 14-30 和 图 14-45 中 ， 如 果 不 删 除 单元 格 中 的 空格 符 ， 对 页 面 的 布局 会 有 什 
么 影响 ? 
2. ”重新 定义 CSS 样式， 更 改 页 面 导 航 栏 的 背景 颜色 或 图 像 ， 对 页 面 应 用 新 的 配色 方 


条 。 
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